el-table多选表格实现默认选中删除选中列表取消勾选等联动效果-Toy模板网

这篇具有很好参考价值的文章主要介绍了el-table多选表格实现默认选中删除选中列表取消勾选等联动效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

实现效果如下：
el-table多选表格实现默认选中删除选中列表取消勾选等联动效果,elementui的使用,javascript,vue.js,开发语言
代码如下：文章来源地址https://www.toymoban.com/news/detail-715955.html

<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="日期" width="120">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      <el-table-column prop="address" label="地址" show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <div>
      <p v-for="(item, index) of multipleSelection" :key="index">
        {{ item.name }}
        <span @click="delect(item, index)">删除</span>
      </p>
    </div>
  </div>
</template>
<script>
export default {
  name: "HomeIndex",
  components: {},
  data() {
    return {
      tableData: [],
      multipleSelection: [],
    };
  },
  created() {
    this.allCheck();
  },
  mounted() {},
  methods: {
    allCheck() {
      this.tableData = [
        {
          id: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ];
      this.multipleTable = [
        {
          id: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ];
      let checkedId = [];
      for (let item of this.multipleTable) {
        checkedId.push(item.id);
      }
      this.$nextTick(() => {
        for (let key in this.tableData) {
          if (checkedId.indexOf(this.tableData[key]["id"]) !== -1) {
            this.$refs.multipleTable.toggleRowSelection(
              this.tableData[key],
              true
            );
          }
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    delect(item, index) {
      this.$refs.multipleTable.toggleRowSelection(
        this.tableData.find((ite) => ite.id == item.id),
        false
      );
    },
  },
};
</script>
<style   scoped>
</style>

到了这里，关于el-table多选表格实现默认选中删除选中列表取消勾选等联动效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！