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在呈現數組時綁定內聯樣式表達式

回答

相關問題