1.给接口请求的数组对象 增加自己需要的字段

const r1 = await getPaperOptionList({
  id: route.query.evaluateId,
  questionNum:
    ruleData.value[index].ruleDetail.firstScope[0].firstVal,
})
ruleData.value[index].ruleDetail.secondScope[0].paperOption =
  r1.result.map((item) => ({
    ...item,
    selectOption:
      item.type === 1 //选择题 是选项code
        ? item.code
        : item.optionsType === '1' //填空题如果是学院或专业的id，普通填空题传选项id(optionsType0.不是填空 1.学院表 2.专业表)
        ? item.id
        : item.id,
    showLabel: item.type === 1 ? item.code : item.content,
  }))

删除自定义在数组里使用的字段的属性和属性值

ruleForm.value.materialList.map((item) => {
  delete item.id
})
``
写法二：
```js
let obj = JSON.parse(JSON.stringify(this.formS))
for (let key in obj) {
  if (
    Object.prototype.hasOwnProperty.call(obj, key) &&
    key === 'checkPass'
  )
    delete obj[key]
}

---

2.element-plus 表格树

<el-table
    v-loading="listLoading"
    :data="tableData"
    row-key="evaluateId"
    style="width: 100%"
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
  >
    <el-table-column label="测评类型" prop="evaluateId" show-overflow-tooltip>
      <template #default="{ row }">
        <!-- <span>{{ evaluationFormat(row.evaluateType) }}</span> -->
        <span>{{ row.name }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="参与测试人数"
      prop="evaluateNum"
      show-overflow-tooltip
    />
    <el-table-column
      label="完成测试人数"
      prop="finishNum"
      show-overflow-tooltip
    />
</el-table>

row-key="evaluateId"是接口中唯一标准的字段

[
    {
        "children": [
            {
                "evaluateId": "1432901567562641449",
                "evaluateNum": 90,
                "evaluateType": 105,
                "finishNum": 57,
                "name": "学科知识能力"
            },
            {
                "evaluateId": "1432901567562641450",
                "evaluateNum": 37,
                "evaluateType": 107,
                "finishNum": 31,
                "name": "核心通用能力高级测试"
            }
        ],
        "evaluateId": "1432901567562641448",
        "evaluateNum": 92,
        "evaluateType": 102,
        "finishNum": 26,
        "name": "高阶能力测评"
    },
    {
        "children": [
            {
                "evaluateId": "1432901567562641452",
                "evaluateNum": 53,
                "evaluateType": 111,
                "finishNum": 50,
                "name": "适配职业测评"
            }
        ],
        "evaluateId": "1432901567562641451",
        "evaluateNum": 53,
        "evaluateType": 104,
        "finishNum": 50,
        "name": "适配职业测评"
    }
]

---

3.格式化数字格式 为：88,000

const numFormat = (val) => {
  //每个三位价格逗号
  var int = val.toString().split('').reverse().join('') // 翻转整数
  var temp = '' // 临时变量
  for (var i = 0; i < int.length; i++) {
    temp += int[i]
    if ((i + 1) % 3 === 0 && i !== int.length - 1) {
      temp += ',' // 每隔三个数字拼接一个逗号
    }
  }
  temp = temp.split('').reverse().join('') // 加完逗号之后翻转

  return temp // 返回
}

---

4.element-plus 上传图片 问题：上传一张图片 出现多个上传的位置 闪动 解决：上传图片 src为本地字节流地址，不然他会读多个上传到服务器的地址进行展示出现闪动效果

<el-form-item label="测评图片" prop="img">
	<el-upload
	  ref="upload"
	  action="#"
	  class="upload-test"
	  :class="{ hide: hideUpload }"
	  :file-list="imageList"
	  :http-request="uploadFile"
	  :limit="1"
	  list-type="picture-card"
	  :on-change="handleChange"
	>
	  <template #default>
	    <i class="el-icon-plus"></i>
	  </template>
	  <template #file="{ file }">
	    <div>
	      <img
	        alt=""
	        class="el-upload-list__item-thumbnail"
	        :src="file.url"
	        style="width: 146px; height: 146px; border-radius: 6px"
	      />
	      <span class="el-upload-list__item-actions">
	        <span
	          class="el-upload-list__item-delete"
	          @click="handleRemove(file)"
	        >
	          <i class="el-icon-delete"></i>
	        </span>
	      </span>
	    </div>
	  </template>
	</el-upload>
</el-form-item>

<script>
  import { ref, onActivated, onUnmounted, computed, nextTick } from 'vue'
  import { uploadPublicToAliOSS } from '@/api/common.js'
  import { ossFilePath } from '@/utils/ossFilePath'
  export default {
    name: 'ConfigureInformationModal',
    components: { WmTinymce },
    emits: ['onEmitSubmit'],
    setup() {
      const ruleForm = ref({
        img: '', //图片
      })
      const isCircle = ref(false)
      const coverMapUrl = ref('')
      const formRef = ref(null)
      const imageList = ref([])
      const upload = ref(null)
      const hideUpload = ref(false) //上传一张之后隐藏长传图片按钮

      onActivated(() => {
        loading.value = true
        formRef.value.resetFields() //初始化Form表单
        ruleForm.value = {
          type: '', //测评类型 大1 小2
          evaluateType: '', // 测评类型
          pid: '', //上级id(小测评必填)
          questionPaperId: '', //试卷id(小测评必填)
          initSize: '', //测评人数
          img: '', //图片
          intro: '', //简介
          detailIntro: '', //详细介绍
          notes: '', //测评须知
          superiority: '', //superiority
        }
        imageList.value = []
        coverMapUrl.value = ''
        hideUpload.value = false
      })
     
      // 图片上传成功回调
      const uploadFile = (data) => {
        let fd = new FormData()
        fd.append('file', data.file)
        fd.append('ossFilePath', ossFilePath('我的能量'))
        uploadPublicToAliOSS(fd).then((response) => {
          if (parseInt(response.status) === 200) {
            // console.log('imageList.value:', imageList.value)
            ruleForm.value.img = response.result.url
            isCircle.value = false
            coverMapUrl.value = response.result.url

            hideUpload.value = true
          } else {
            gp.$baseMessage(`上传失败！`, 'error')
          }
        })
      }
      // 上传文件列表删除
      const handleRemove = (file) => {
        ruleForm.value.img = ''
        coverMapUrl.value = ''
        imageList.value.splice(0, 1)
        hideUpload.value = imageList.value.length >= 1
        upload.value.handleRemove(file)
      }
      const handleChange = () => {
        //一张时 class为true
        hideUpload.value = imageList.value.length >= 1
      }

      // 编辑回显
      const fetchData = async () => {
        loading.value = true
        try {
          const res = await getTestDetail(route.query.id)
          if (res.status === 200) {
            ruleForm.value = res.result
            if (ruleForm.value.img) {
              imageList.value.push({
                url: ruleForm.value.img,
              })
              coverMapUrl.value = ruleForm.value.img
              hideUpload.value = true //回显有一张图片 隐藏class 为true
            } else {
              imageList.value = []
            }
            loading.value = false
            return Promise.resolve(true)
          }
        } catch (err) {
          return Promise.reject(err)
        }
      }
      return {
        ruleForm,
        uploadFile,
        isCircle,
        coverMapUrl,
        formRef,
        fetchData, //回显
        handleRemove,
        handleChange,
        imageList,
        upload,
        hideUpload,
      }
    },
  }
</script>
<style lang="scss" scoped>
  :deep() {
    .hide .el-upload--picture-card {
      display: none !important;
    }
  }
</style>

展示效果：

---

6.移除数组指定的一组数据

ruleDetails.value.splice(index, 1)

7.预览图片element组件修改

<el-table-column align="left" label="" min-width="140">
  <template #default="scope">
    <el-row v-if="scope.row.tableDataImage" :gutter="20">
      <el-col
        v-for="(item, index) in scope.row.tableDataImage"
        :key="index"
        :span="8"
      >
        <div class="" style="margin-bottom: 6px">
          <el-image
            :ref="
              (el) => {
                if (el) test[scope.row.id] = el
              }
            "
            append-to-body
            class="show_image"
            fit="fill"
            lazy
            :preview-src-list="scope.row.images"
            :src="item"
            :z-index="9999999"
          />
        </div>
      </el-col>
      <!--  @click="getImageNumber(scope.row)" -->
      <el-button
        v-show="scope.row.tableDataImage.length < scope.row.images.length"
        class="el-button-text--primary"
        type="text"
        @click="isImagePreView(scope.row.id)"
      >
        查看更多
      </el-button>
    </el-row>
  </template>
</el-table-column>

<script>
setup() {
      const test = reactive({})
      const showViewer = ref(false)
      const getDetail = async (cursor) => {
        if (cursor) {
          info.value = { ...info.value, cursor: cursor } // 根据传递的cursor来重置pageInfo
        }
        await getPostsMsg(route.query.id, {
          cursor: cursor,
          limit: info.value.limit,
          searchCount: true,
          sidx: '',
          sord: '',
          content: info.value.content,
          // content: '',
        }).then((res) => {
          totalNum.value = res.result.total
          tableData.value = res.result.records.map((item) => {
            test[item.id] = null
            return {
              ...item,
              tableDataImage: item.images.slice(0, 3), //展示前三章图片
              copyTableDataImage: item.images.slice(0, 3), // 拷贝数据 静态 三张
              clickBtnNum: 0, //点击查看更多次数
            }
          })
          imageList.value = tableData.value.images
          const images = [...document.getElementsByTagName('img')].map((img) =>
            img.getAttribute('src')
          )
          if (images && images.length) {
            setTimeout(() => {
              loading.value = false
            }, 400)
          }
        })
      }
      const isImagePreView = (id) => {
        test[id].showViewer = true
      }
      return {
        tableData, //表格数据
        imageList,
        staticUserImage,
        getDetail, //刷新帖子列表
        getImageNumber, //查看更多
        showViewer,
        test,
        isImagePreView,
      }
    },
</script>