Vue3 el-table（单选的实现以及解决多个表格切换样式错乱的问题）

一. 单选

一. Table Template

<template>
  <div>
    <el-table ref="elTable" :data="dataList" @select="select" @selection-change="selectionChange">
      <el-table-column header-align="center" align="center" type="selection" size="medium" width="55"></el-table-column>
        <el-table-column type="index" label="序号" align="center" width="80"></el-table-column>
        <el-table-column prop="xm" show-overflow-tooltip label="人员名称" align="center"></el-table-column>
        <el-table-column prop="orgName" show-overflow-tooltip label="公司" align="center"></el-table-column>
    </el-table>
    <el-button type="primary" @click="confirm">确定</el-button>
  </div>
</template>

二. Script

<script>
export default{
  data () {
    return {
      dataList: [{
        xm: '刘丫丫',
        orgName: '稳通科技'
      },{
        xm: '张嘻嘻',
        orgName: '稳通金融'
      },{
        xm: '马媛媛',
        orgName: '嘻哈科技'
      },{
        xm: '杜思思',
        orgName: '嘻哈科技'
      },{
        xm: '刘丫丫',
        orgName: '稳通科技'
      },{
        xm: '张嘻嘻',
        orgName: '稳通金融'
      },{
        xm: '马媛媛',
        orgName: '嘻哈科技'
      },{
        xm: '杜思思',
        orgName: '嘻哈科技'
      }],
      singleSelection: []
    }
  },
  methods: {
    select (selection, row) {
      this.$refs.elTable.clearSelection();
      // 判断selection是否有值存在
      if (selection.length === 0) return
      this.$refs.elTable.toggleRowSelection(row, true);
    },
    selectionChange (val) {
      this.singleSelection = val.length ? [val[val.length - 1]] : []
    },
    confirm () {
      console.log(this.singleSelection)
    }
  }
}
</script>

二.解决多个el-table切换样式错乱的问题

解决方式：给每个表格加上唯一key值