其实实现批量操作功能的重点在于如何取到索引值,之前懵懵懂懂不明白,想通了之后还是比较简单的。

ElementUI:选择多行数据时使用 Checkbox。当用户勾选目标信息时,会触发selection-change事件。

<el-button type="warning" @click="deleteSelectItem">批量删除</el-button>
<el-table
            ref="multipleTable"
            :data="searchlist"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="bianhao" label="" width="200">
            </el-table-column>
  </el-table>

在method中实现handleSelectionChange方法,val为选中的数据集合。其中, multipleSelection: [],需要在data()中声明

  //获取多选的数据
    handleSelectionChange(val) {
      this.multipleSelection = val;//存储选中的数据
      console.log(val);
    },

实现deleteSelectItem方法(批量删除按钮点击触发)。

deleteSelectItem() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //遍历获得多选选中的index值
          this.multipleSelection.forEach((value, index) => {
            //遍历多选框获取的数据
            this.searchlist.forEach((v, i) => {
              //遍历数据表,任意一个属性值相同,则说明该数据被选中,其i则为索引值
              if (value.bianhao == v.bianhao) {
                this.searchlist.splice(i, 1);
              }
            });
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          console.log("删除成功");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },

修改选中数据的某字段值与删除类似,找到索引号后进行操作,例如修改searchlist中选中项的状态。editSelectItem(state)中的state为需要改成的状态,比如说选中的项的状态全部改为正常那就editSelectItem(“正常”)。

editSelectItem(state) {
      this.$confirm("是否修改选中记录的状态?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //遍历获得多选选中的index值
          this.multipleSelection.forEach((value, index) => {
            //遍历多选框获取的数据
            this.searchlist.forEach((v, i) => {
              //遍历数据表,任意一个属性值相同,则说明该数据被选中,其i则为索引值
              if (value.goodinid == v.goodinid) {
                this.searchlist[i].state = state
              }
            })
          })
          this.$message({
            type: "success",
            message: "审核成功!",
          })
        })
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45 8 个月前
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 8 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐