Vue.js 在渲染数组时绑定内联样式表达式答案

【问题标题】：Vue.js binds inline style expressions when rendering an ArrayVue.js 在渲染数组时绑定内联样式表达式
【发布时间】：2017-02-06 18:21:39
【问题描述】：

我有以下组件，我想如果列的宽度在一个圆圈的时候渲染了一个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>

求解决办法，谢谢！

【问题讨论】：

你能澄清一下吗？我通常很擅长以下问题，但我在这里没有运气。
我的问题描述得够清楚吗？

标签： vue.js vue-component

【解决方案1】：

如果您确定始终有宽度，是的，您的解决方案就足够了。

另外，你可以使用一个方法：

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

然后，在 HTML 中，你可以这样做

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

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

【讨论】：

【解决方案2】：

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

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

那么你可以简单地做：

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

有没有更好的解决方案？

【讨论】：