一.?單選

一. 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: '穩(wěn)通科技'
      },{
        xm: '張嘻嘻',
        orgName: '穩(wěn)通金融'
      },{
        xm: '馬媛媛',
        orgName: '嘻哈科技'
      },{
        xm: '杜思思',
        orgName: '嘻哈科技'
      },{
        xm: '劉丫丫',
        orgName: '穩(wěn)通科技'
      },{
        xm: '張嘻嘻',
        orgName: '穩(wěn)通金融'
      },{
        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值文章來源地址http://www.zghlxwxcb.cn/news/detail-680861.html

到了這里，關(guān)于Vue3 el-table 單選的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！