把后端返回的数据处理成我们想要的再展示

新增表单的时候单选一个然后传给后端，编辑的时候要把后端返回的数据渲染上来，注意此时格式要一致才行

html部分 ， clearable可清除 ， multiple可多选

 <!-- 推送用户 -->
          <el-form-item>
            <el-select v-model="QueryRequest.target"
                       clearable
                       multiple
                       placeholder="推送用户">
              <el-option v-for="item in targetList"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
 <!-- 推送分类 -->
  <el-form-item label="推送分类"
                        prop="pushType">
            <el-radio-group v-model="pushFrom.pushType"
                            @change="changeRadio">
              <el-radio v-for="(item) in pushTypeList"
                        :key="item.value"
                        :label="item.value">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>

data部分

   // 推送用户
      targetList: [
        { label: '合伙人', value: 1 },
        { label: '内部员工', value: 2 },
      ],
      // 推送类型
      pushTypeList: [
        { label: '今日看点', value: 1 },
        { label: '产品', value: 2 },
        { label: '文章', value: 3 },
        { label: '视频', value: 4 },
        { label: '海报', value: 5 },
        { label: '共享内容', value: 6 },
        { label: '文本', value: 7 },
      ],

js部分

  getPageList() {
      let data = {
        ...this.QueryRequest,
        startTime: this.timeFrom[0],
        endTime: this.timeFrom[1],
      }
      houseKeeperPageList(data).then((res) => {
        if (!res.success) return
        if (res.data.list.length == 0 && this.QueryRequest.pageNum != 1) {
          this.QueryRequest.pageNum = 1
          this.getPageList()
          return
        }
        //推送用户的空对象targetObjMap  
        //后端返回的是target: [1, 2, 0]数组 
        const targetObjMap = {}
        //循环我们定义的targetList 把数组转为对象
        this.targetList.forEach((v) => (targetObjMap[v.value] = v.label))
        //把res.data的结果循环  通常后端返回的格式不是我们需要的
        //就需要先转换再赋值给 tableData
        //map第一个参数是回调函数，第二个是this指向 必须return，返回一个新数组
        this.tableData = res.data.list.map((v) => {
          //find是遇到一个符合条件的就返回 find不改变原数组
          //用我们定义的pushTypeList数组去和后端返回的pushType: 7 去比较
          let pushTypeItem = this.pushTypeList.find(
            (item) => item.value == v.pushType
          )
          //后端返回 method: 1  我们需要把他转成文字
          v.method = v.method == 1 ? '站内信' : ''
          //后端返回pushType: 7  如果pushTypeItm这个对象有值就展示对象的label  没有就是空
          v.pushTypeLabel = pushTypeItem ? pushTypeItem.label : ''
          //targetLabel 推送用户后端返回的是target: [1, 2, 0] 我们需要把他转为数组再用/隔开去展示
          v.targetLabel = v.target.map((value) => targetObjMap[value]).join('/')
          return v
        })
        this.totalPage = Number(res.data.total)
      })
    },

我们在点击编辑的时候需要把当前行的内容赋值给表单但是这里要注意用上$nextTick

   //编辑推送
    updatePush(row) {
      this.titleType = '编辑推送'
      this.dialogVisible = true
      this.readDisabled = false
      this.$nextTick(() => {
        this.pushFrom = { ...row }
      })
    },