结构层:

<div v-for="(item, index) in dataList" :key="index">
          <el-row :gutter="20">
            <el-col class="col-text" :span="14">
              {{ item.text }}
            </el-col>
            <el-col :span="6">
              <el-switch
                v-model="item.switchValue"
                active-color="#45cdff"
                inactive-color="#d6d6d6"
                @change="switchChange"
              >
              </el-switch>
            </el-col>
          </el-row>
</div>

dataList数据格式:

dataList: [
        {
          text: 'xx工程师是否按约定时间上门',
          switchValue: true,
          type: '1001'
        },
        { text: '是否主动出示上岗工作牌', switchValue: true, type: '1002' },
        { text: 'xx完毕后是否逐项检查正常', switchValue: true, type: '1003' },
        {
          text: 'xx完毕后是否清洁设备和现场',
          switchValue: true,
          type: '1004'
        }
],

逻辑层:

//  评论switch
    switchChange(val) {
      let arr = JSON.parse(JSON.stringify(this.dataList))
      console.log(arr, 'dataList')
      arr.filter((obj) => obj.switchValue !== val)
      let newArray = arr.filter((item) => {
        return item.switchValue
      })
      console.log(newArray, '过滤后数据')
      let array = []
      newArray.forEach((item) => {
        array.push(item.type + '#' + item.text + '#1')
        this.appraiseForm.aoIdDesResult = array.toString()
      })
      console.log(array, '拼接数据')
    },

打印数据:
在这里插入图片描述
效果如下:
在这里插入图片描述

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐