element-ui?table表格控件實現(xiàn)單選功能代碼實例

更新時間：2023年09月20日 09:53:50 作者：leader

這篇文章主要給大家介紹了關于element-ui?table表格控件實現(xiàn)單選功能的相關資料,單選框是指在?Element?UI?的表格組件中,可以通過單選框來選擇一行數(shù)據(jù)。用戶只能選擇一行數(shù)據(jù),而不能同時選擇多行,需要的朋友可以參考下

需求

今天遇到一個需求，感覺挺簡單的，需求如下：

就是一個表格，在表格的前面加上一個選擇框，注意：只能單選

發(fā)現(xiàn)問題

然后我就去element ui上粘代碼：雖然element ui上有對應的單選表格，可是并不符合我的需求

然后我又發(fā)現(xiàn)下面有一個多選的表格，樣式雖然相似，可是還是不符合我的需求：

解決問題

最終我還是面向了百度編程，參考這里

下面給大家展示一個小的demo,直接粘貼代碼就可以看到效果：

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      @row-click="singleElection"
      highlight-current-row
    >
      <el-table-column align="center" width="55" label="選擇">
        <template slot-scope="scope">
          <!-- 可以手動的修改label的值，從而控制選擇哪一項 -->
          <el-radio class="radio" v-model="templateSelection" :label="scope.row.id"
            >&nbsp;</el-radio
          >
        </template>
      </el-table-column>
      <el-table-column align="center" prop="id" label="編號" width="80"> </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: "0001",
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀區(qū)金沙江路 1518 弄",
        },
        {
          id: "0002",
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀區(qū)金沙江路 1517 弄",
        },
        {
          id: "0003",
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀區(qū)金沙江路 1519 弄",
        },
        {
          id: "0004",
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀區(qū)金沙江路 1516 弄",
        },
      ],
      //   當前選擇的行的id
      templateSelection: "",
      //   當前選擇的行的數(shù)據(jù)
      checkList: [],
    }
  },
  methods: {
    singleElection(row) {
      this.templateSelection = row.id
      this.checkList = this.tableData.filter((item) => item.id === row.id)
      console.log(`該行的編號為${row.id}`)
    },
  },
}
</script>

最終的效果如下圖所示，想必大家也都知道了該如何照貓畫虎了吧，??????：