【Vue】element-ui 多选表格怎么做单选

【Vue】element-ui 多选表格怎么做单选
可否改为单选呢？
https://jsfiddle.net/api/post...

回答

<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然后重置数组为当前选中的就可以了吧

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

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

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

以上是 【Vue】element-ui 多选表格怎么做单选 的全部内容， 来源链接： utcz.com/a/75839.html

回到顶部