最近开发遇到一个需求:选择表格的一条数据在表格外进行操作,还有一个最令人痛疼的是回显数据,要把选中的那条数据的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;
}