element table组件实现单选，单选回显操作-CFANZ编程社区

element table组件实现单选，单选回显操作

最近开发遇到一个需求：选择表格的一条数据在表格外进行操作，还有一个最令人痛疼的是回显数据，要把选中的那条数据的radio按钮高亮展示，最近刚好有时间整理了一下，大家可以去借鉴一下。

Table Attributes

参数	说明	类型	可选值	默认值
row-class-name	行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。	Function({row, rowIndex})/String	—	—

Table Events

事件名	说明	参数
current-change	当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性	currentRow, oldCurrentRow

表格以及表格数据：

<el-table 
:data="tableDatas" 
stripe 
style="width: 100%" 
@current-change="handleRadioChange"     
:row-class-name="tableRowClassName">
    <el-table-column  type="index" width="50px" align="center">
        <template slot-scope="scope">
            <el-radio v-model="defaultRadio" :label="scope.row.index">
                {{scope.row.index}}
            </el-radio>
        </template>
    </el-table-column>
    <el-table-column prop="name" label="姓名"> </el-table-column>
    <el-table-column prop="address" label="地址"> </el-table-column>
</el-table>

data(){
   return{
      tableDatas: [
        {
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
     ],
     defaultRadio:-1
   }
}

方法：

methods: {
    handleRadioChange(val){
      if (val) {
        this.defaultRadio = val.index;
      }
    },
    tableRowClassName({row, rowIndex}){
      row.index = rowIndex; //在原有的数据上加一个index
    },
}

注意：回显让对应的单选框高亮展示，一定要注意返回的绑定值defaultRadio和数据值index的数据类型是否保持一致。如果不想要radio的label值展示，可以将文本信息的数据清除掉。

::v-deep .el-radio__label {
  display: none;
}

0 条评论