Element UI Table - 如何根据条件隐藏特定列
\u003cel-table-column\u003e\n v-for\u003d"(col,index) in dataFilter"\n :key\u003d"col.id+index"\n :label\u003d"col.name"\n :min-width\u003d"col.minWidth"\n :width\u003d"col.width"\n :prop\u003d"col.code"\n :align\u003d"col.align"\n :sortable\u003d"col.sortable"\n show-overflow-tooltip\u003e\nconst columns \u003d [\n { id: '0', name: '序号', code: 'xh', width: 65, align: 'center' , checked: true },\n { id: '1', name: '标题', code: 'title', minWidth: 200, sortable: 'custom' , checked: true },\n];\n现在a属性的值是1,el-table-column根据if判断隐藏标题字段\n列如果a==='1'才显示字段title列,如果不是1就不显示title字段列\n:show-overflow-tooltip\u003d"col.code === 'ld' ? reportStatus === 'msth' : true">怎么隐藏不了\n要根据条件来隐藏标题字段列,可以使用 v-if 指令来判断是否显示列。在 el-table-column 组件上添加 v-if 指令,判断 col.code 是否等于 \'title\' 并且 a 的值是否等于 \'1\',如果条件成立则显示该列,否则隐藏该列。\n\n修改代码如下:\n\nhtml\n\u003cel-table-column\n v-for\u003d\"(col,index) in dataFilter\"\n :key\u003d\"col.id+index\"\n :label\u003d\"col.name\"\n :min-width\u003d\"col.minWidth\"\n :width\u003d\"col.width\"\n :prop\u003d\"col.code\"\n :align\u003d\"col.align\"\n :sortable\u003d\"col.sortable\"\n v-if\u003d\"(col.code === \'title\' && a === \'1\') || col.code !== \'title\'"\n show-overflow-tooltip\n\u003e\n\u003c/el-table-column\u003e\n\n\n这样就可以根据条件来隐藏标题字段列了。
原文地址: https://www.cveoy.top/t/topic/pKjo 著作权归作者所有。请勿转载和采集!