el-table组件select项选中数据回显

html部分需要注意 在标间内加入:row-key="getRowKeys"属性绑定唯一属性id,以及在勾选框一栏添加:reserve-selection="true"属性

      <el-table

                style="width: 100%"

                border

                :data="channelList"

                :row-key="getRowKeys"

                @selection-change="handleSelectionChange"

                @row-click="handleRowClick"

                ref="multipleTable"

              >

                <el-table-column

                  type="selection"

                  :reserve-selection="true"

                  width="30"

                  align="center"

                ></el-table-column>

                <el-table-column

                  prop="arFactoryName"

                  label="厂"

                  align="center"

                ></el-table-column>

                <el-table-column

                  prop="arEquipmentName"

                  label="摄像机名称"

                  align="center"

                ></el-table-column>

                <el-table-column

                  prop="arChannelName"

                  label="通道名称"

                  align="center"

                ></el-table-column>

              </el-table>

需要注意的是:
1、你的需要回显的id数据不能比列表数据先获取到,因为你toggleAllSelection的时候,列表还没渲染,你应该把这个放在列表渲染后。

2、拿到列表数据后,根据pagebingAgentdata检索列表项中存在的数据,这可以使用id去匹配,找到后使用toggleRowSelection进行勾选。

以下是script部分

1、设置回显数据id:

    this.selectedList = result.patrolPlanChannelViews;

        let rowids = this.selectedList.map((item) => item.arChannelCode);

        this.channelList.forEach((item) => {

          if (rowids.includes(item.arChannelCode)) {

            this.$nextTick(() => {

              this.$refs.multipleTable.toggleRowSelection(item);

            });

          }

        });

2、回显数据设置唯一id:

getRowKeys(row) {

      return row.arChannelCode;

},

3、回显表单数据

        // 表单数据回显,result为详情接口数据

        for (let k in result) {

          if (typeof result[k] !== undefined) {

            this.form[k] = result[k];

          }

        }

        // 避免重复提交数据

        this.form.patrolPlanChannelViews = [];

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值