js es6 map+arrayFrom处理后端杂乱的数据,自定义table里的elect

Carrmans

于 2022-07-12 15:13:54 发布

阅读量341

点赞数

文章标签： vue.js javascript es6

本文链接：https://blog.youkuaiyun.com/weixin_40291248/article/details/125743519

版权

这篇博客介绍了如何利用ES6的map和arrayFrom方法来优化后端返回的数据结构，以便在前端表格中实现复选框的回显功能。作者展示了核心的视图层和逻辑层代码，通过el-table-column和el-select组件，结合v-model和@change事件处理服务绑定。此外，还展示了如何将服务ID转换为新的数据格式，以支持表格的显示和交互操作。

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

直接看效果图吧

后端数据

改造后的数据

后端返回数据结构这样,要求直接在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);
            });