el-table实现单选

500 阅读1分钟

element-ui 官网找了一圈,表格只支持多选。所以要自定义表格列的方式去实现了。

html:

 <el-table-column  label="操作" :align="'center'" width="55">
    <template slot-scope="scope">
        <!-- 单选 -->
        <el-radio
        :label="scope.$index"
        v-model="selectRowVal"
        @change="handleSelectChange(scope.$index,scope.row)"
        ></el-radio>
    </template>
  </el-table-column>

js:

  //响应式声明
  data() {
    return {
      selectRow:{},//选中的行数据包
      selectRowVal:undefined,//当前选中label值
    };
  },
  //函数
  handleSelectChange(index,row){
      this.selectRow = row
      console.log(this.selectRow)
  },

效果:

2022-12-08.105130.png

选中的行数据值: 2022-12-08.105142.png

注意:

radio 必须得给label且唯一 ,这个相对于是它的选项key。不然选中一个的时候,其他跟着全部选中。

CSS:

隐藏掉label

.el-table{
  /deep/.el-radio__label{
    display: none;
  }
}

至此,功能实现。当然这不是唯一的方案,你也可以使用el-checkbox,然后选中的时候利用排他思想做也是可以实现的。或是就利用el-table自带的多选功能,在选中的时候使用替换思想,动态改变选中值。