element-ui的table表格使用checkbox,控制单选

首先table使用@select-change函数和ref属性,

主要函数:

// select-change绑定的函数:

handleRow(row){

//控制单选,当选择个数大于1时,清空所有,选择第二个,也就是说当一点击选到第二个时就清空,然后只选第二个

if(row.length>1){

        this.$refs.table.clearSelection();

        this.$refs.table toggleRowSelection(row[1]);

    }

}

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用 ElementUITable 组件进行多选时,可以通过配置 `show-selection` 和 `selection-type` 属性来实现多选功能。 其中,`show-selection` 属性用于控制是否显示选择列,如果设置为 `false` 则不会显示选择列,如果设置为 `true` 则会显示选择列。 `selection-type` 属性用于指定选择类型,可以设置为 `'checkbox'` 或 `'radio'`。当设置为 `'checkbox'` 时,会显示复选框,允许用户选择多行数据,当设置为 `'radio'` 时,会显示单选框,只允许用户选择一行数据。 在选中数据后,可以通过 `@selection-change` 事件获取选中的数据,或者通过 `this.$refs.table.getSelectedRows()` 方法获取选中的数据。另外还可以通过 `@select-all` 和 `@select` 事件监听全选和单选操作。 示例代码如下: ```html <template> <div> <el-table :data="tableData" :show-selection="true" :selection-type="'checkbox'" @selection-change="handleSelectionChange"> <el-table-column type="selection"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="gender" label="性别"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18, gender: '男' }, { name: '李四', age: 20, gender: '女' }, { name: '王五', age: 22, gender: '男' }, { name: '赵六', age: 24, gender: '女' } ] } }, methods: { handleSelectionChange(rows) { console.log(rows) // 获取选中的数据 } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值