el-table 单选

@selection-change="selectChange"

selectChange (val) {
      if (val.length > 1) {
        this.$refs.table.clearSelection();
        this.$refs.table.toggleRowSelection(val.pop());
      } else {
        this.selectData = val
      }
    }

<template>
  <el-table
    :data="tableData"
    border
    stripe
    ref="tableData"
    @row-click="singleElection"
  >
    <el-table-column label="" width="65" align="center">
      <template #header>
        <el-button type="text" @click="clear"> 清除</el-button>
      </template>
      <template slot-scope="scope">
        <el-radio
          class="radio"
          v-model="templateSelection"
          :label="scope.$index"
          >&nbsp;</el-radio
        >
      </template>
    </el-table-column>
    <el-table-column prop="id" label="ID"></el-table-column>
    <el-table-column prop="title" label="标题"></el-table-column>
    <el-table-column prop="priority" label="优先级"></el-table-column>
    <el-table-column prop="state" label="状态"></el-table-column>
    <el-table-column prop="dealingPeople" label="处理人"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      templateSelection: "",
      // 返回数据
      tableData: [
        {
          id: 1,
          title: "111",
          priority: "高",
          state: 1,
          dealingPeople: "admin",
        },
        {
          id: 2,
          title: "111",
          priority: "中",
          state: 2,
          dealingPeople: "admin",
        },
        {
          id: 3,
          title: "111",
          priority: "低",
          state: 3,
          dealingPeople: "admin",
        },

      ],
    };
  },
  methods: {
    singleElection(row) {
      console.log(row);
      this.templateSelection = this.tableData.indexOf(row);
      console.log(this.templateSelection);
      this.templateRadio = row.id;
    },
    clear() {
      this.templateRadio = null;
      this.templateSelection = null;
    },
  },
};
</script>

<style lang="scss" scoped>

/deep/.el-radio .el-radio__label{
 display: none;
}
</style>

<template>
  <div>
    <el-table
      :data="cardIdlist"
      ref="carTable"
      border
      tooltip-effect="dark"
      highlight-current-row
      style="width: 100%"
      @current-change="handleSelectionChange2"
      @selection-change="handleSelectionChange"
    >
      <!-- 单选方法,返回选中的表格行 -->
      <el-table-column align="center" label="选择" width="75">
        <!--  // 添加一个多选框,控制选中与否 -->
        <!-- 单选的也可以用单选框,这样效果更明显,选择之后不能取消 -->
        <template slot-scope="scope">
          <div>
            <el-radio
              v-model="checked"
              :label="scope.$index"
              @change="test"
              class="a11111111111111111"
              >&nbsp;</el-radio
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column
        type="selection"
        width="50"
        align="center"
      ></el-table-column>
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="80"
      ></el-table-column>
      <el-table-column
        type="index"
        prop="name"
        label="name"
        align="center"
        width="80"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  prop: {
    //单选 使用哪个字段为唯一值 最好用id
    field: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      selectData: [],
      checked: null,
      cardIdlist: [
        { id: 1, name: 1 },
        { id: 2, name: 2 },
        { id: 3, name: 3 },
        { id: 4, name: 4 },
      ],
    };
  },
  methods: {
    test(val) {
      console.log(val);
    },
    handleSelectionChange2(selection) {
      console.log(selection);
      if (this.field) {
        this.checked = selection[field];
      }
    },
    handleSelectionChange(selection) {
      if (selection.length > 1) {
        this.$refs.carTable.clearSelection();
        this.$refs.carTable.toggleRowSelection(selection.pop());
      } else {
        this.selectData = selection;
      }
    },
  },
};
</script>

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