el-table 设置单选

@selection-change="handleChange"

事件 :

  handleChange(selection) {

//返回的数组

      console.log(selection);

      selection.forEach((item) => {

        this.form.postId = item.postId

        this.form.postName = item.postName

      })

//关键

      if (selection.length > 1) {

        let del_row = selection.shift()

        this.$refs.multipleTable.toggleRowSelection(del_row, false)

      }

### 实现 Element-UI 的 `el-table` 组件单行选择功能 为了实现 `el-table` 的单行选择功能,可以通过绑定 `v-model` 到 `<el-radio>` 控件上,并通过监听表格的点击事件来控制当前选中的行。以下是完整的解决方案: #### 修改后的代码示例 ```html <template> <div> <!-- 使用 el-tableel-radio 结合 --> <el-table v-loading="loading" :data="tableData" height="100%" style="width: 100%" highlight-current-row @row-click="handleRowClick"> <!-- 单选 --> <el-table-column label="选择" width="50px"> <template slot-scope="scope"> <el-radio v-model="currentId" :label="scope.row.id">{{ '' }} </el-radio> </template> </el-table-column> <!-- 示例名称 --> <el-table-column prop="purchaseNo" min-width="160px" label="示例名称"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { loading: false, // 加载状态 tableData: [ { id: '1', purchaseNo: '订单A' }, { id: '2', purchaseNo: '订单B' }, { id: '3', purchaseNo: '订单C' } ], currentId: null // 当前选中的行 ID }; }, methods: { handleRowClick(row) { this.currentId = row.id; // 更新当前选中项 } } }; </script> ``` 上述代码实现了以下功能: - **单选框绑定**:通过将 `v-model` 设置为 `currentId` 并将其与每一行的唯一标识符(如 `id`)关联起来[^1]。 - **行点击事件处理**:当用户点击某一行时,触发 `@row-click` 方法并更新 `currentId` 值。 #### 关键点解析 1. **`highlight-current-row` 属性** - 此属性用于高亮显示当前被选中的行。 2. **`@row-click` 事件** - 它允许捕获用户的鼠标点击行为,并手动设置当前选中的行。 3. **动态同步** - 用户无论是在单选框还是直接点击行的方式下都可以完成选中操作,两者保持一致的行为逻辑。 --- ### 注意事项 如果需要支持更多复杂的功能(如多级表头编辑),可以参考 Vue + Element-UI 的二次封装方案[^2]。这种情况下通常会引入自定义组件或扩展方法以增强灵活性。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

-嘻嘻哈哈~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值