前端 Table组件的增删改查

需求是指标项可以选择的内容是个数组，然后选过的指标项不能重复选择，这边的解决方案是禁用处理，

<a-table
  :data="dataitemList"
>
<!-- option组件的disabled属性就是负责重复的指标项不可以选择 -->
  <a-option
      v-for="item in riskSignalIndicatorNameSelect"
      :key="item.code"
      :value="item.code"
      :disabled="item.disabled"
  >
      {{ item.codeName }}
  </a-option>
</a-table>




=================js=========================
watch监听整个table的数据，监听用户在整个页面上增删改查的操作


watch(() =>JSON.parse(JSON.stringify(dataitemList.value)),(newValue, oldValue) => {
      // 刚进入表单操作
      if (newValue.length !== 0) {
        if (newValue.length > oldValue.length) {
           newValue.forEach((item: any,index:number) => {
             riskSignalIndicatorNameSelect.value.forEach((ite,inx) =>{
               if (item.riskSignalIndicatorCode === ite.code) {
                 riskSignalIndicatorNameSelect.value[inx].disabled = true
               }
             })
           });
        } else if (newValue.length < oldValue.length && oldValue[number - 1]?.riskSignalIndicatorCode) {
          // 删除操作
          console.log('减少',riskSignalIndicatorNameSelect.value,oldValue,oldValue[number - 1]?.riskSignalIndicatorCode);
          riskSignalIndicatorNameSelect.value.forEach(item => {
            if (oldValue[number - 1].riskSignalIndicatorCode  && oldValue[number - 1].riskSignalIndicatorCode === item.code) {
              item.disabled = false
            }
          })
        } else {
          // 当前指标项变化
          console.log(newValue,oldValue,riskSignalIndicatorNameSelect.value)
          if (newValue[number]) {
            riskSignalIndicatorNameSelect.value.forEach(item => {
              if (newValue[number].riskSignalIndicatorCode === item.code) {
                item.disabled = true
              }
              if ( newValue[number].riskSignalIndicatorCode !==  oldValue[number].riskSignalIndicatorCode && oldValue[number].riskSignalIndicatorCode === item.code) {
                console.log('变化',oldValue[number].riskSignalIndicatorCode,item.code);
                item.disabled = false
              }
            })
            
          }
        }
      }
    })