vue el-checkbox默认显示为选中的push方法

此篇博客详细介绍了如何使用JavaScript的for-in循环遍历对象,通过if条件检查每个属性是否存在,并将符合条件的属性名添加到checkArr中,展示了基础的数组操作和条件逻辑。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  for (var objVal in obj) {
            if (obj[objVal]) {
              this.checkArr.push(objVal);
            }
          }
Vue中,`<el-table>` 是 Element UI 提供的一个表格组件,它结合了数据绑定和样式模板,非常适合展示结构化数据。当需要在表格中添加复选框 (`el-checkbox`) 的时候,可以配合 `v-model` 指令来控制每个单元格的状态,并通过事件监听来处理用户的勾选操作。 例如,你可以这样做: ```html <template> <el-table :data="tableData"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column property="name" label="姓名"></el-table-column> <el-table-column property="age" label="年龄"></el-table-column> <!-- 添加一个自定义列来显示复选框 --> <el-table-column prop="selectMe" label="选择"> <template slot-scope="scope"> <el-checkbox v-model="scope.row.selectMe" @change="handleCheckboxChange(scope.$index, scope.row)"></el-checkbox> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 20, selectMe: false }, { name: '李四', age: 25, selectMe: true }, // 更多数据... ], selectedRows: [], }; }, methods: { handleCheckboxChange(index, row) { if (row.selectMe) { this.selectedRows.push(row); } else { const indexInSelected = this.selectedRows.findIndex(item => item.id === row.id); if (indexInSelected !== -1) { this.selectedRows.splice(indexInSelected, 1); } } }, }, }; </script> ``` 在这个例子中,`handleCheckboxChange` 方法会被触发,每当复选框状态改变时,会更新 `selectedRows` 数组,记录哪些行被选中
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值