vue 控制动态控制筛选条件的显示隐藏

1. 效果如下

2. 功能描述

1. 点击“添加筛选规则” 就添加了一条
2. 鼠标移入会在该条数据 右上角 出现 “移出”，点击移出，移除该条
3. 第一条永远不能被移除
4. 当全部被选择后 会 隐藏 “添加筛选规则”

3. 主要的功能代码

<template>
  <div>
    <div class="sidebar-add">
      <header>编辑筛选</header>
      <div class="content">
        <div class="content-item" v-for="(item,index) in rule" :key="index" v-show="item.isShow" @mouseenter="enter(index)" @mouseleave="leave(index)">
          <label class="label">{{item.label}}</label>
          <span class="clear" @click="clear(item)" v-show="item.lickOne && item.id!=1">- 移除</span>
          <!-- 解决时间 -->
          <div v-if="item.id==1">
            <el-input v-model="workOrderContent" placeholder="请输入解决时间"></el-input>
          </div>
          <!-- 创建人 -->
          <div v-if="item.id==2">
             <el-input v-model="workOrderContent" placeholder="请输入创建人"></el-input>
          </div>
          <!-- 处理人 -->
          <div v-if="item.id==3">
            <el-input v-model="workOrderContent" placeholder="请输入处理人"></el-input>
          </div>
          <!-- 工单分类 -->
          <div v-if="item.id==4">
            <el-input v-model="workOrderContent" placeholder="请输入工单分类"></el-input>
          </div>
          <!-- 工单状态 -->
          <div v-if="item.id==5">
            <el-input v-model="workOrderContent" placeholder="请输入工单状态"></el-input>
          </div>
          <!-- 工单来源 -->
          <div v-if="item.id==6">
            <el-input v-model="workOrderContent" placeholder="请输入工单来源"></el-input>
          </div>
          <!-- 截止日前 -->
          <div v-if="item.id==7">
            <el-input v-model="workOrderContent" placeholder="请输入截止日前"></el-input>
          </div>
          <!-- 工单号 -->
          <div v-if="item.id==8">
            <el-input v-model="workOrderContent" placeholder="请输入工单号"></el-input>
          </div>
          <!-- 优先级 -->
          <div v-if="item.id==9">
             <el-input v-model="workOrderContent" placeholder="请输入优先级"></el-input>
          </div>
          <!-- 工单内容 -->
          <div v-if="item.id==10">
            <el-input v-model="workOrderContent" placeholder="请输入工单内容"></el-input>
          </div>
          <!-- 访问标识 -->
          <div v-if="item.id==11">
            <el-input v-model="workOrderContent" placeholder="请输入访问标识"></el-input>
          </div>
        </div>
        <div class="content-item add-rule" @click="screenRule = !screenRule">
          <a v-show="!tag">+ 添加筛选规则</a>
          <div class="screenRule" v-if="screenRule">
            <ul>
              <li v-for="(item,index) in rule" :key="index" v-show="!item.isShow">
                <a @click="changType(item)">{{item.label}}</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="content-item add-work-order">
          <button>保存当前条件并筛选</button>
        </div>
      </div>
    </div>
    
  </div>
</template>
<script>
export default {
  data() {
    return {
      screenRule:false, // 控制添加筛选“列”的显示隐藏
      tag:false, // 控制“添加筛选”显示隐藏
      workOrderContent:'',
      /**
       * 初始化搜索条件
       * lickOne 判断 “移除” 状态是否存在
       * isShow 是否显示
       */
      rule: [
        { id:"1",lickOne:false, label: "解决时间", isShow: true},
        { id:"2",lickOne:false, label: "创建人", isShow: true},
        { id:"3",lickOne:false, label: "处理人", isShow: true},
        { id:"4",lickOne:false, label: "工单分类", isShow: true},
        { id:"5",lickOne:false, label: "工单状态", isShow: true},
        { id:"6",lickOne:false, label: "工单来源", isShow: true},
        { id:"7",lickOne:false, label: "截止时间", isShow: true},
        { id:"8",lickOne:false, label: "工单号", isShow: false},
        { id:"9",lickOne:false, label: "优先级", isShow: false},
        { id:"10",lickOne:false, label: "工单内容", isShow: false},
        { id:"11",lickOne:false, label: "访问标识", isShow: false},
      ],
     
    };
  },
  methods: {
    // 鼠标移入
    enter(index){
      this.rule[index].lickOne = true;
    },
    // 鼠标移出
    leave(index){
      this.rule[index].lickOne = false;
    },
    // 点击添加筛选规则
    changType(it){
      for (let index in this.rule) {
         if(this.rule[index].id == it.id){
           this.rule[index].isShow = true;
         }
      }
      this.tag = this.rule.every( item => item.isShow === true)
    },
    // 移除当前规则
    clear(it){
      for (let index in this.rule) {
         if(this.rule[index].id == it.id){
           this.rule[index].isShow = false;
         }
      }
      this.tag = this.rule.every( item => item.isShow === true)
    }
  },
};
</script>

<!--css太多就删掉了-->
<style lang="less" scoped>
</style>