vue 表格单选 单击某行选中

//关键点：label一定要写对，并且不能有重复的，radio的值一定是惟一的，

<template>

  <div>

    <el-table

      :data="tableData"

      style="width: 100%"

      :row-key="getRowKey"

      @row-click="onselectionchange"

    >

      <!-- @current-change="handleSelectionChange" -->

      <el-table-column width="180">

        <template slot-scope="scope">

          <el-radio v-model="radioData" :label="scope.row.address">

            <span style="color: red"></span

          ></el-radio>

        </template>

      </el-table-column>

      <el-table-column prop="date" label="日期" width="180"> </el-table-column>

      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>

      <el-table-column prop="address" label="地址"> </el-table-column>

    </el-table>

  </div>

</template>

<script>

export default {

  data() {

    return {

      radioData: "",

      tableData: [

        {

          id: "1",

          date: "2016-05-02",

          name: "王小虎",

          address: "上海市普陀区金沙江路 1518 弄",

        },

        {

          id: "2",

          date: "2016-05-04",

          name: "王小虎",

          address: "上海市普陀区金沙江路 1517 弄",

        },

        {

          id: "3",

          date: "2016-05-01",

          name: "王小虎",

          address: "上海市普陀区金沙江路 1519 弄",

        },

        {

          id: "4",

          date: "2016-05-03",

          name: "王小虎",

          address: "上海市普陀区金沙江路 1516 弄",

        },

      ],

    };

  },

  methods: {

    onselectionchange(val) {

      console.log("val单行选中", val);

      console.log("this.radioData", this.radioData);

      // this.radioData = val.address;

      this.radioData = val.address;

      // return;

    },

    handleSelectionChange(val) {

      console.log("val", val);

      this.radioData = val.address;

    },

    getRowKey(row) {

      console.log(row);

      return row.address;

    },

  },

};

</script>

<style lang="sass"></style>