3.el-table添加单选框

需求：el-table 只有复选框,我们也可以通过排他思想让多选变成单选,但终究不好,所以要写一个单选框出来

思路：

1.通过 slot 自己写一个 el-radio

2. radio 必须得给 label 且唯一 ,这个相对于是它的选项 key.不然选中一个的时候,其他跟着全部选中,我这里用的是 scope.$index,更好的选择是每一项的 id 值,scope.row.id

3.label 有值以后会显示出来,我们不想要这个显示,只想要单选框,可以 css 给隐藏掉

<template>
  <div>
    <el-table
      border
      style="height: 100%"
      stripe
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
      :data="tableData"
    >
      <el-table-column label="选择" width="55">
        <template slot-scope="scope">
          <el-radio
            :label="scope.$index"
            v-model="selectRowVal"
            @change="handleSelectChange(scope.row)"
            >{{ "" }}
          </el-radio>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表格数据
      tableData: [
        { name: "123", startTime: "1", endTime: "2" },
        { name: "1234", startTime: "1", endTime: "2" },
      ],
      // 单选绑定的值,用不到
      selectRowVal: "",
    };
  },
  methods: {
    // 点击单选,就可以对该条数据进行处理
    handleSelectChange(row) {
      console.log(row);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-table {
  :deep(.el-radio__label) {
    display: none;
  }
}
</style>