vue el-table 超过个数禁止勾选

原创已于 2022-03-18 16:10:55 修改 · 3k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #elementui

于 2022-03-18 16:09:36 首次发布

Vue2.x 同时被 2 个专栏收录

166 篇文章

订阅专栏

Css/Canvas/SVG/Elementui

144 篇文章

订阅专栏

本文介绍了如何在前端表格组件中实现超过预设数量后禁止勾选的功能，同时展示了如何通过CSS隐藏表格的表头多选框。通过设置`selectable`方法限制用户在表格中选择的行数，并使用`:reserve-selection`属性来保留已选状态。此外，还提供了一段CSS代码用于隐藏`el-table`的表头多选框，增强用户体验。

效果（超过自己设定的个数后禁止勾选）：
在这里插入图片描述

        <el-table
          :data="tableData"
          :cell-style="tableCellStyle"
          height="350px"
          highlight-current-row
          border
          v-loading="loading"
          @select="tableSelectChangeLeft"
          :row-key="row => { return row.id }"
        >
          <el-table-column :reserve-selection="true" type="selection" :selectable="checkStatus" width="55" align="center" />

  methods: {
    checkStatus(){
      return this.selectedRowData.num>this.tableDataAdd.length
    },

如果想隐藏el-table表头的多选框：

//去掉表头多选框
::v-deep .el-table__header-wrapper .el-checkbox {
  display: none;
}