el-checkbox实现月份选择变化,checked动态调整显示状态,动态改变多选框的选项问题,并且拿到选项值

本文介绍如何使用Vue.js的el-checkbox组件动态调整显示状态,实现月份选择功能。当选择变化时,通过@change事件触发相应函数,传入当前月份、索引和行内容。在data中预设数据并与后端返回的月份进行匹配,通过修改父级元素内容来更新本行的选择状态。
摘要由CSDN通过智能技术生成

结果样式

在这里插入图片描述
直接上代码,在table表格中,再次进行月份遍历,下方有月份的table数组,由于月份后端返回代码,所以前端做了调整 , @change这里的内容是当选择变化是触发函数,分别内容是,触发的内容,触发的本表格的遍历的月份,索引和对应的本行内容
这里取消掉了v-module框,直接动态改变每个单元格

<el-table-column v-for="(item, index) in table" :key="index" :label="item.value" min-width="180" width="60px">
        <template slot-scope="scope">
          <el-checkbox :key="index" :checked="scope.row.jhtzsjs.includes(item.num)"
            @c
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值