antd+vue3實現全選&反選

antd+vue3實現全選&反選

 

效果如下：

 

 

重要代碼如下：

　　　　　<a-form-item
          label="選擇研究院"
          v-bind="validateInfos.instituteIds"
        >
          <div style="margin-bottom: 10px">
            <a-space>
              <a-button size="small" type="primary" @click="onCheckAllInstitute(true)">
                全選
              </a-button>
              <a-button size="small" @click="onCheckAllInstitute(false)">反選</a-button>
            </a-space>
          </div>
          <a-checkbox-group v-model:value="modelRef.instituteIds">
            <a-checkbox v-for="item in list" :key="item.instituteId" :value="item.instituteId">
              {{ item.instituteAlias }}
            </a-checkbox>
          </a-checkbox-group>
        </a-form-item>


　　 // 全選、反選研究院
    const onCheckAllInstitute = bool => {
      if (bool) {
        modelRef.instituteIds = state.list.map(v => v.instituteId)
      } else {
　　　　　　 // 反選 27         const reverseInstitute = []
        state.list.forEach(v => {
          const index = modelRef.instituteIds.findIndex(x => x === v.instituteId)
          if (index === -1) {
            reverseInstitute.push(v.instituteId)
          }
        })
        modelRef.instituteIds = reverseInstitute
      }
    }