element ui表格勾选功能

最新推荐文章于 2024-07-30 18:29:33 发布

辽辽无期

最新推荐文章于 2024-07-30 18:29:33 发布

阅读量815

点赞数

分类专栏： ui框架文章标签： ui elementui

本文链接：https://blog.csdn.net/yaya_xiaohui/article/details/132363423

版权

ui框架专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、单选功能

<el-table :data="dataList" :header-cell-style="{ background: '#F0FAFF', color: '#787878' }"
        @selection-change="handleSelectionChange" stripe border style="width: 100%;" ref="tb">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column label="序号" type="index" width="50" align="center">
        </el-table-column>
        <el-table-column property="xxx" width="180" label="xxx" align="center">
        </el-table-column>
        <el-table-column property="xxx" label="xxx" align="left">
        </el-table-column>
        <el-table-column property="xxx" label="xxx" align="center">
        </el-table-column>
      </el-table>

...

handleSelectionChange(val) {
      this.multipleSelection = val;
      if (val.length > 1) {
        this.$refs.tb.clearSelection();
        this.$refs.tb.toggleRowSelection(val.pop());
      }
    },

2、多选功能

    handleSelectionChange(val) {
        this.multipleSelection = val;
    },

3、禁用功能

在 type="selection" 列上添加selectable方法，返回true代表可以勾选，false表示禁用

<el-table :data="dataList" :header-cell-style="{ background: '#F0FAFF', color: '#787878' }" @selection-change="handleSelectionChange" stripe border style="width: 100%;margin-top: 10px;">
  <el-table-column type="selection" align="center" width="55" :selectable="checkboxT">
  </el-table-column>
  <el-table-column property="xxx" label="xxx" align="center" width="160">
      <template slot-scope="scope">
          {{ scope.row.sn }}
      </template>
  </el-table-column>
  <el-table-column property="xxx" label="xxx" align="left">
  </el-table-column>
  <el-table-column property="xxx" width="400" label="xxx" align="left">
  </el-table-column>
</el-table>

...

checkboxT(row, index) {
    return row.stockCount > 0
},