效果:不只是带单选框,点击当前行单选框选中状态
网上查了一些发现很多都是只能点击当前radio选中当前行,配合element-ui的单选table时发现两个的选择状态是不一致的,所以调整了一下
效果
代码
<el-table ref="singleTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange" @row-click = "showRow" style="width: 100%" border> <el-table-column label="选择" width="70" center> <template scope="scope">
<!--
为空,不加这个radio的label会显示index数字,注意从0开始的;radio会全选的问题是label相同导致的
-->
<el-radio class="radio" v-model="radio" :label="scope.$index" v-model="radio" @change.native="getCurrentRow(scope.$index)" > </el-radio> </template> </el-table-column> </el-table>
//row-click 当某一行被点击时会触发该事件 row, event, column showRow(row){ //赋值给radio this.radio = this.tableData.indexOf(row); }, /* urrent-change 当表格的当前行发生变化的时候会触发该事件,如果要高亮当前行,请打开表格的 highlight-current-row 属性 currentRow, oldCurrentRow */ handleCurrentChange(val,index) { this.currentRow = val; this.$emit('data',val.pkg); }, getCurrentRow(val){ console.log(val) },