element ui 中如何优雅美观的实现单选表格

element ui 中如何实现单选表格

我们都知道 element ui 中有复选框的表格 ，但是如果我们有单选的表格怎么办，样式还要和风格搭配 ，接下来我 一行代码带你实现 单选功能。

1. 我先讲下我们的思路：首先我们要知道我们的功能是单选，所以需要element 的单选控件el-radio
2. 然后我们需要知道我们当前点击的是哪一行 ，所以正好用到element 表格的一个事件
   @row-click=“getTableData” 这个就能知道我们目前点击当前行的值，
3. 我们根据这个值来判断用户点击的是那些数据 ，但是我们还要给当前的redio 赋值让其变成选中状态 我们就用到了<template slot-scope="scope">这个语法 见下方代码，拿到这个就可以给当前的radio赋值了
4. 但是有个问题 他会显示你这个选中的状态 包括后面的文字 所以我就写了 样式来覆盖，千万不要忘记添加下方的style这个样式

//首先在data中定义一个radio
 radio: "", //单选的值

 <el-table
          :data="locationData"
          style="width: 100%"
          height="400px"
          border
          show-overflow-tooltip="false"
          @row-click="getTableData"
        >
          <el-table-column width="50">
            <template slot-scope="scope">
              <el-radio v-model="radio" :label="scope.row.id"></el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="节点名称"></el-table-column>
          <el-table-column prop="category" label="类别"></el-table-column>
          <el-table-column prop="contact" label="描述"></el-table-column>
          <el-table-column prop="address" label="位置"></el-table-column>
        </el-table>

//在methods 中写这个方法
 getTableData(event) {
      /**
       * 方法 获取单行的数据
       * event  返回的参数
       */
      console.log(event);
      this.radio = event.id;
      this.selectLocationData = event;
    },

//写在css里面
>>> .el-radio {
  margin-left: 6px;
}
>>> .el-radio .el-radio__label {
  display: none;
}