element ui 表格设置单选按钮

1.单选按钮

在这里插入图片描述

<el-table-column label="" width="50">
                  <template scope="scope">
                    <el-radio :label="scope.$index" v-model="radio" @change.native="getCurrentRow(scope.row)"></el-radio>
                  </template>
                </el-table-column>

这个就是单选的,重点是@change,在elementUI中是加在table中的这样是点击行才会选中,但有问题。

2.多选按钮变单选按钮

element ui 表格设置单选按钮_第1张图片

element ui 表格设置单选按钮_第2张图片

<script>
export default {
    data() {
      return {
        checkList:[],
      }
    },
    methods: {
      checkBoxChange(val) { // 控制 单选
        if(this.checkList.indexOf(val) > -1){
          this.checkList = [];
          this.checkList.push(val);
        }
    },
}
</script>
<style lang="scss">
.table-simple-checkbox{ // 隐藏 1
  .el-checkbox__label{
    display: none;
  }
}

你可能感兴趣的:(vue+element,javascript)