最近在做项目的时候遇到一个问题,使用的是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>

通过以上办法可以实现需求想要的效果。

GitHub 加速计划 / eleme / element
15
3
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 1 年前
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 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐