最近在做项目的时候遇到一个问题,使用的是table组件中的多选,需求要求的是,列表数据除了状态为待审核的可选之外,其他状态前的复选框不可选择。看了下文档结合一些朋友的建议,总结可以使用如下的方法来解决。
通过添加相应类来控制样式,设置 display: none ,达到隐藏 checkbox 的目的。
利用Table Attributes 属性里面的 cell-class-name 属性,添加单元格的class
<template>
<el-table
:cell-class-name="cellcb"
...
>
</el-table>
</template>
<script>
methods: {
cellcb(row){
if(row.row.checkStatus === 1&&row.columnIndex === 0){
return "myCell"
}
}
</script>
<style>
.myCell .el-checkbox__input {
display: none
}
</style>
或者使用如下的办法:
比如状态为1时不显示复选框
<el-table-column type="selection" width="45" v-if="checkStatus != 1"></el-table-column>
通过以上办法可以实现需求想要的效果。