美文网首页
vue中element table 单选,添加单选框

vue中element table 单选,添加单选框

作者: 3e2235c61b99 | 来源:发表于2021-04-22 14:34 被阅读0次

vue项目中,element table需要单选,但是组件自带的单选选中样式为高亮,不如单选框明显,想要改为单选框
实现如下:

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column width="40">
        <template slot-scope="scope">
          <el-radio v-model="radioSelect" :label="scope.row.id" @change.native.stop="(e) => handleRadioChange(e, scope.row)">&nbsp;</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 {
        tableData: [
          { id: 1, date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
          { id: 2, date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
          { id: 3, date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
        ],
        radioSelect: null,
      }
    },

    methods: {
      handleRadioChange(e, row) {
        e.stopPropagation();
        this.currentRow = Object.assign({}, row);
        console.log(this.currentRow)
      },
    }
  }
</script>

相关文章