Element Ui 实现表格单选功能-Toy模板网

这篇具有很好参考价值的文章主要介绍了Element Ui 实现表格单选功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

今天碰到一个需求，把element-ui中的table多选框改成单选框，实现单选功能

话不多说，直接上代码

<template>
  <div class="container">
    <el-table
        :data="tableData"
        style="width: 100%"
        @row-click="rowClickHandle"
        highlight-current-row
    >
      <el-table-column align="center" width="50" label="选择">
        <template slot-scope="scope">
          <el-radio class="rowRadio" v-model="rowSelection"></el-radio>
        </template>
      </el-table-column>
      <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
      <el-table-column align="center" prop="date" label="日期" width="150"></el-table-column>
      <el-table-column align="center" prop="name" label="姓名" width="80"></el-table-column>
      <el-table-column align="center" prop="address" label="地址" width="250"></el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  data() {
    return {
      tableData: [{
        id: '1',
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: '2',
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: '3',
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: '4',
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: '5',
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: '6',
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      rowSelection: '',
      radioCheckList: [],
    }
  },
  methods: {
    rowClickHandle(row) {
      this.rowSelection = row.id  //必须要把唯一值赋给rowSelection,否则会出问题
      this.radioCheckList = row   //radioCheckList就是你选中的当前行数据且只能选一行
    },
  },
}
</script>

如果这篇文章对您有用的话，记得一键三连！👀文章来源地址https://www.toymoban.com/news/detail-508772.html

到了这里，关于Element Ui 实现表格单选功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！