js es6 map+arrayFrom处理后端杂乱的数据,自定义table里的select 编辑直接看效果图

编辑

直接看效果图吧

后端数据

编辑

改造后的数据

编辑

后端返回数据结构这样,要求直接在table 复选框要做回显

利用es6简洁的特性 map+arrayFrom

核心代码视图层+逻辑层

        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          label="绑定"
        >
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.serviceValue"
              multiple
              placeholder="请选择"
              @change="clickSheng()"
            >
              <el-option
                v-for="item in options"
                :key="item.serviceId"
                :label="item.serviceName"
                :value="item.serviceId"
              >
              </el-option>
            </el-select>
            &nbsp; &nbsp; &nbsp;
            <el-button type="text" @click="bangdingFW(scope.row)"
              >绑定服务</el-button
            >
          </template>
        </el-table-column>

            let dataList = data.data.list;
            let dataNew = []; //新数组
            dataList.map((item) => {
              var sValue = Array.from(item.serviceList, ({ serviceId }) => serviceId);
              let obj = {
                industryId: item.industryId,
                industryName: item.industryName,
                serviceList: item.serviceList,
                serviceValue: sValue,
              };
              dataNew.push(obj);
            });