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)
        }
      }