element table根据条件隐藏复选框

最新推荐文章于 2024-01-05 11:07:47 发布

原创最新推荐文章于 2024-01-05 11:07:47 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

Vue 专栏收录该内容

48 篇文章

订阅专栏

本文介绍了如何在Element UI的表格中，通过CSS样式实现成功同步状态下的复选框隐藏，并利用`display:none`和`disable`属性来管理选择行为，提升用户体验和代码灵活性。

实现复选框的隐藏是不够的，还要使用css禁用

<el-table
      v-loading="loading"
      :data="merchantList"
      width="800px"
     :cell-class-name="cellClass"
      @selection-change="handleSelectionChange"
    >
      <template slot="empty">
        <svg-icon key="item-warp" type="nodata" icon="icon-wushuju" />
      </template>
      <el-table-column
        type="selection"
        label="全选"
        width="55"
        :selectable="selectable"
      ></el-table-column>
 </el-table>

methods:{
 cellClass({ row, columnIndex }) {
      if (row.syncStatus == "SUCCESS_SYNC" && columnIndex === 0) {
        // 根据某个属性，添加样式，隐藏复选框
        return "myCell";
      }
    },
    selectable(row, columnIndex) {
      if (row.syncStatus == "SUCCESS_SYNC") {
        // 根据某个属性，添加样式，隐藏复选框
        return false;
      } else {
        return true;
      }
    },
}

<style>
.myCell .el-checkbox__input {
  display: none !important;
}
</style>