element-ui的table组件中,type属性为selection的列不能v-if控制显示
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
element-ui的table组件中,type属性为selection的列不能v-if控制显示
第一种方法:
利用 table 属性里面的cell-class-name和 header-cell-class-name属性
<el-table v-loading="loading" ref="multipleTable" :data="tableData"
:cell-class-name="cellClass"
:header-cell-class-name="cellClass">
<el-table-column type="selection" label-class-name="table-selection"/>
</el-table>
methods: {
cellClass(row){
if (this.activeName==='0' && row.columnIndex === 0) {
return 'table-selection'
}
}
}
<style>
.el-table {
.el-table-column--selection.table-selection {
display:none;
}
}
</style>
第二种方法:
使用table的cell-style和header-cell-style属性
<el-table v-loading="loading" ref="multipleTable" :data="tableData"
:cell-style="cellStyle"
:header-cell-style="cellStyle">
<el-table-column type="selection" label-class-name="table-selection"/>
</el-table>
methods: {
cellStyle({ row, column, rowIndex, columnIndex }){
if (this.activeName==='0' && column.type === 'selection') {
return { // 返回对象
display: 'none'
}
}
}
}
第三种方法:
checkbox不隐藏,disabled属性设为true不给选
<el-table v-loading="loading" ref="multipleTable" :data="tableData">
<el-table-column type="selection" width="55" :selectable="disabledCheckBox" /> <!-- 注:selectable的类型必须是function -->
</el-table>
methods: {
disabledCheckBox(row, index) {
if (this.activeName==='0') {
return true
} else {
return false
}
}
}
第四种:
每个tab页分别使用单独的table
<el-tabs v-model="activeName" @tab-click="handleFilter">
<el-tab-pane label="待处理" name="0">
<el-table v-loading="loading0" ref="multipleTable0" :data="tableData0">
<el-table-column type="selection"/>
</el-table>
</el-tab-pane>
<el-tab-pane label="已处理" name="1">
<el-table v-loading="loading1" ref="multipleTable1" :data="tableData1">
...
</el-table>
</el-tab-pane>
</el-tabs>
第五种(建议使用):
在 el-table-column 标签里面加上一个 key 值为随机数,就能用v-if
<el-table border @selection-change="handleSelectionChange" :data="tableData" style="width: 100%">
<el-table-column type="selection" v-if="flag" :key="Math.random()" ></el-table-column>
</el-table>
export default {
data() {
return {
flag: false,
}
}
}
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45
8 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 8 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)