首页 > 其他 > 详细

vue 多选按钮三种状态切换

时间:2019-05-24 13:18:54      阅读:576      评论:0      收藏:0      [点我收藏+]

技术分享图片

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

 

vue 多选按钮三种状态切换

原文:https://www.cnblogs.com/wangliko/p/10917537.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!