element-ui 多选表格怎么做单选

wend
  • 153
回复
阅读 7.4k
7 个回答
<template>
    <el-table :data="tableData">
        <el-table-column>
            <template slot-scope="scope">
                <!-- label可以使用tableData中的某个字段,注意该字段的值不要重复 -->
                <el-radio v-model="radioVal"
                          :label="scope.row.test">&thinsp;</el-radio>
            </template>
        </el-table-column>
        <el-table-column prop="test"
                         label="test"></el-table-column>
    </el-table>
</template>
<script>
export default {
  data () {
    return {
      tableData: [
        { test: 1 },
        { test: 2 },
        { test: 3 },
        { test: 4 },
        { test: 5 }
      ],
      radioVal: 1  //单选的默认值,可以制空
    }
  }
}
</script>
@select="select"
select(selection,row){
    if(selection.length>1){
        selection.shift()
    }
    
},

handleSelectionChange(rows) {

            this.multipleSelection = rows;
            if (this.multipleSelection.length > 1) {
                this.$refs.multipleTable.toggleRowSelection(this.multipleSelection[0]);
            }
        },

监听selection-change然后重置数组为当前选中的就可以了吧

猴哥
  • 1
新手上路,请多包涵

@selection-change 可以判断选中的长度大于1的话就清除上次选中的吧

王丫丫
  • 1
新手上路,请多包涵

楼主弄出来了么,我也做这个功能,试了很久都不行

@selection-change 时将之前选中的清空

你知道吗?

宣传栏