(vue+element-ui)動態設置tabel列的顯示與隱藏

不得不說,百度很強大,只要搜索餓了麼怎麼動態設置列會得到很多答案;

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存在,設置動態列的時候,列表的表頭跳閃厲害;

最後,大家若是有更好的方法,希望留下完全代碼,方便閱讀

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章