不得不說,百度很強大,只要搜索餓了麼怎麼動態設置列會得到很多答案;
1、v-show(不生效):v-show直接綁定,得到的結果很意外,哈哈,不起作用,餓了麼對v-show不感冒;
2、v-if():此方法確實可以控制顯示與隱藏;不過分情況使用:
>>a: element組件 el-table-column
<el-table-column
v-if="colData[0].istrue"
prop="CustName"
min-width="85"
label="客戶姓名"
:show-overflow-tooltip='true'
align="center">
</el-table-column>
注意看結構;這裏只採用了prop傳值的寫法;也就是說tabel展示出來的數據是隻可讀的不可以操作某一列裏面的某一個字段;
若只是可讀,那麼可以使用這個方法控制動態展示列;v-if綁定動態值;
>>b: element組件 el-table-column (可以點擊tabel表格的某一展示值,做一些事情,如:彈窗,跳轉等)
<el-table-column
key="1"
v-if="colData[0].istrue"
prop="CustName"
min-width="85"
label="客戶姓名"
:show-overflow-tooltip='true'
align="center">
<template slot-scope="scope">
<el-tag size="mini">
<el-button
type="text"
@click="jumpInterfaceHome(scope.row)">{{ scope.row.CustName }}</el-button>
</el-tag>
</template>
</el-table-column>
注意看結構:這裏多了 template 標籤,通過包裹可以來做一些事情,任你YY去行動;
重點注意 key
1.若不加key 那麼你點擊動態展示列的時候佈局會亂,或者導致報錯;
2.加了key之後ok解決;
備註:加 key 是百度來的,有篇文章加的是 :key=Math.random();
這樣是有bug存在,設置動態列的時候,列表的表頭跳閃厲害;
最後,大家若是有更好的方法,希望留下完全代碼,方便閱讀