Vue中为ElementUI的表格多选框做外部全选按钮

最新推荐文章于 2024-08-09 08:00:00 发布

星海蓝昇

最新推荐文章于 2024-08-09 08:00:00 发布

阅读量4.8k

点赞数 3

分类专栏： vue+element 文章标签： vue elementUI el-table 外部全选按钮

本文链接：https://blog.csdn.net/weixin_45386734/article/details/102623570

版权

Vue中为ElementUI的表格多选框做外部全选按钮

由于在某些情况下，会使用模板生成表格，所以在column模板中type = selection时，不像在el-select-group中可以有明确的prop值可以判断、选取，所以平时要用ref = multipleTable来保证能取到模板生成的表格。
在el-table中，通过@selection-change = selRow来控制全选按钮的不全选状态。

//生成表格的模板代码
<div class="table taskcontent">
   <el-table :data="tabledata" style="width:100%" @selection-change='selRow' ref="multipleTable">
      <el-table-column type="selection" min-width="55" align="center" ></el-table-column>
      <el-table-column prop="num" label="编号" min-width="120" align="center"></el-table-column>
      <el-table-column prop="name" label="任务名称" min-width="300" align="center"></el-table-column>
      <el-table-column prop=