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>