vue 多選按鈕三種狀態切換

1.顯示的dialog

      <!-- 選中標簽 -->
      <el-dialog
        :visible.sync="checkTag"
        :title="userTitle"
        width="30%"
        @close="tagID = []">
        <div v-loading="listLoadingTag" element-loading-text="心急吃不了熱豆腐">
          <div class="tages">
            <el-checkbox-group v-model="checkedTags" >
              <el-checkbox
                v-for="(item,index) in tages"
                :indeterminate="item.status === 'half_checked'"
                :label="index"
                :key="index"
                @change="changeCheckCss(index)">
                {{ item.label_name }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handelCloseTag">取 消</el-button>
          <el-button type="primary" @click="submitcheckTag">確 定</el-button>
        </span>
      </el-dialog>

2.切換狀態

  changeCheckCss(index) {
      this.tages[index].status = false
    },

3.拿到只改變發生改變的數據處理邏輯

     this.submitTags = []
      // 篩選出新選中的值
      for (let i = 0; i < this.checkedTags.length; i++) {
        let num = 0
        for (let j = 0; j < this.CopycheckedTags.length; j++) {
          if (this.checkedTags[i] === this.CopycheckedTags[j]) {
            num += 1
            break
          }
        }
        if (num === 0) {
          const obj = {
            id: this.tages[this.checkedTags[i]].id,
            status: 'checked'
          }
          this.submitTags.push(obj)
        }
      }
      // 篩選沖被取消選中的值
      for (let i = 0; i < this.CopycheckedTags.length; i++) {
        let num = 0
        for (let j = 0; j < this.checkedTags.length; j++) {
          if (this.CopycheckedTags[i] === this.checkedTags[j]) {
            num += 1
            break
          }
        }
        if (num === 0) {
          const obj = {
            id: this.tages[this.CopycheckedTags[i]].id,
            status: 'not_checked'
          }
          this.submitTags.push(obj)
        }
      }