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

Question

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

求解决办法，谢谢！

Answer 1

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

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

那么你可以简单地做：

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

有更好的解决方案吗？

Answer 2

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

否则，你可以使用一个方法：

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

然后，在HTML中，你可以

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

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

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

Vue.js binds inline style expressions when rendering an Array

vue.js

vue-component