Element-ui表格默认选中后通过其他操作取消默认选中

ゝ一世哀愁。 2022-12-23 09:35 590阅读 0赞

## Element-ui表格默认选中后通过其他操作取消默认选中 ##

![演示示例][20201124100423134.gif_pic_left]  
官方文档  
![在这里插入图片描述][20201124101159300.png_pic_center]

代码片段

<template>
      <div class="page">
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 50%" @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.date }}</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>
        <el-divider></el-divider>
        <el-table :data="showList" tooltip-effect="dark" style="width: 50%">
          <el-table-column label="日期" width="120">
            <template slot-scope="scope">{
       { scope.row.date }}</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-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="deleteRow(scope.$index, scope.row)" type="text" size="small">移除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>

data () { 
      return { 
        showList: [],
        tableData: [{ 
          date: '2016-05-03',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 1518 弄'
        }, { 
          date: '2016-05-02',
          name: '王小虎2',
          address: '上海市普陀区金沙江路 1518 弄'
        }, { 
          date: '2016-05-04',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        multipleSelection: []
      }
    },
    methods: { 
      handleSelectionChange(val) { 
        this.showList = val
      },
      // 移除
      deleteRow (index, row) { 
        this.showList.splice(index, 1)
        this.tableData.forEach((item, index) => { 
          if (item.name === row.name) { 
            this.$refs.multipleTable.toggleRowSelection(item)
          }
        })
      }
    },

[20201124100423134.gif_pic_left]: /images/20221120/48870909d7b04a49a440795e0b572db6.png
[20201124101159300.png_pic_center]: https://img-blog.csdnimg.cn/20201124101159300.png#pic_center