呈现数组时，Vue.js绑定内联样式表达式

我有以下组件，我想如果列的宽度当一个圆的值在渲染一个

style=“width:200px”

时，如果列的宽度

width

没有值不渲染，我该怎么办

<template>
    <div class="table-scrollable">
        <table class="table table-bordered table-hover">
            <thead>
                <tr v-if="tableOption.columns.length">
                    <th v-for="(column, index) in tableOption.columns">
                        {{ column.name }}
                    </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                columns: [{
                    name: app.localize('Actions'),
                    width: 200
                }, {
                    name: app.localize('TenancyCodeName'),
                    field: 'tenancyName'
                }, {
                    name: app.localize('Name'),
                    field: 'name'
                }, {
                    name: app.localize('Edition'),
                    field: 'editionDisplayName'
                }, {
                    name: app.localize('Active'),
                    field: 'isActive',
                    width: 100
                }, {
                    name: app.localize('CreationTime'),
                    field: 'creationTime',
                }]
            }
        }
    }
</script>

{{column.name}
导出默认值{
数据（）{
返回{
栏目：[{
名称：app.localize（'Actions'），
宽度：200
}, {
名称：app.localize（'tenacycodename'），
字段：“租户名称”
}, {
名称：app.localize（'name'），
字段：“名称”
}, {
名称：app.localize（'Edition'），
字段：“editionDisplayName”
}, {
名称：app.localize（'Active'），
字段：“isActive”，
宽度：100
}, {
名称：app.localize（'CreationTime'），
字段：“creationTime”，
}]
}
}
}

---

寻求解决方案，谢谢！

我认为最简单的方法是在对象中定义样式，如下所示：

{
  name: app.localize('Actions'),
  style: {
    width: '200px', // px suffix required
  }
}

因此，您可以简单地执行以下操作：

<th v-for="(column, index) in columns" :style="column.style">

---

有更好的解决方案吗？

如果你确定总是有宽度，是的，你的解决方案足够好了

否则，您可以使用以下方法：

methods: {
  // a more explicit name would be better
  style (width) {
    return {
      width: width || 200 + 'px'
    }
  }
}

然后，在HTML中，您可以

<th :style="style(column.width)">...</th>

。。。

---

或使用计算属性确保样式属性存在

您能澄清吗？我通常很擅长以下问题，但我在这里运气不好。我的问题描述得够好吗？