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

-1

我有以下组件，我想如果列的宽度为一个圆的值时表示一个style =" width: 200px "，如果列的值为width没有值不呈现，我该怎么做？Vue.js在呈现数组时绑定内联样式表达式

<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>

寻求解决办法，谢谢

来源

2016-09-28 amin

你能澄清吗？我通常在以下问题上很擅长，但我在这里没有运气。 –

我的问题描述得不够好吗？ – amin

如果您确定始终拥有宽度，那么您的解决方案就够用了。

Otherwsise，你可以使用的方法：

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

然后，在HTML中，你可以做

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

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

来源

2016-09-29 12:36:31 Posva

伊莫最简单的方法是，如果你在对象定义样式，像这样：

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

，那么你可以简单地做：

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

有没有更好的解决办法？

来源

2016-09-29 01:57:33 amin

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

回答

相关问题