Before the order

In the background management of the system, the condition of the filter box is indispensable. At first I thought I could just copy the UI framework code for each filter box and change the variables. As it turns out, I was pretty clueless, and the screening box was a little bit of a brainer.

The purpose of doing this filter box

  1. This background management was done using Bootstrap and JQ, so this is all changed to use vUE’s data binding feature to reduce DOM.
  2. A lot of the duplicate code in the previous version was not extracted as modules, so this version extracts components for code reuse.
  3. In previous versions, a lot of data had to be reset or changed each time a query or re-filter was performed, so this solves the problem of complex data management and difficult maintenance.

Ideal effect

  1. Each selected value is stored in the Vuex. You do not need to value it yourself.
  2. When Tab is selected, it will look up the data itself with the value of the filter box above.
  3. When you click on a page, it will take the Tab data and filter the value to look up the data.
  4. When you click query, the data stays the same.

Analyze and determine requirements

  1. In fact, some screening boxes are related, after the operation will be worth transformation and some screening to see the trigger conditions. For example, the province and city in the image above are related, the province must be selected, and the value of the region must be reset.
  2. After a value is selected, the next filter box is triggered to request the interface, which is mainly listened through watch.

Technology stack

  1. Vuex: The values of the filter box and Tab are stored in a State for unified management
  2. ElelmentUI: Encapsulates the Select component, which is stored in Vuex after each selection. This component only applies to filter boxes.

code

Encapsulation of the Select component

<el-form-item label="" :ref="fromKey"  :prop="fromKey" :key="ramdonkey" :style="'margin-bottom: 5px; width:' + width">
    <el-select v-model="value" :placeholder="text" :multiple="multiple" clearable @clear="clearValue" :key="ramdonkey">
      <el-option v-for="(item,index) in list" :key="index" :label="item.name" :value="item.id">
      </el-option>
    </el-select>
 </el-form-item>
Copy the code
watch: {
     value(n){
       let payload = {
         setVuex: {}, // Set the current vuex
         setRef: Object.assign({}, this.resetKey), // Set the value of the face
       }
       payload.setVuex[this.fromKey] = n;
       this.$emit('selectCallBack', payload)
     },
},
Copy the code
selectCallBack(payload){
       for(let parentRef in payload.setRef){
         let childRef = payload.setRef[parentRef];
         this.$refs[parentRef].setValue(); / / reset value
         this.$refs[parentRef].$refs[childRef].resetField(); // ele frame reset value function
         let params = {};
         params[childRef] = ' ';
         this.SET_SEARCHDATA(params);
       }
       if(payload.setVuex.type && Object.prototype.toString.call(payload.setVuex.type) === '[object Array]'){
         payload.setVuex.type = payload.setVuex.type.join(', ');
       }
       this.SET_SEARCHDATA(payload.setVuex);
 },
Copy the code

Code instructions

  1. The first and second codes are mainly callbacks to the sub-component data, and the assembly of the data, where the main variable is resetKey: the function of this variable is to change one value to satisfy requirement 1, and reset the other value. Form: {parentRefKey: childRefKey}
  2. The third code mainly sets up the Vuex and resets the value. The setValue() function is a reset value

Difficulties encountered

  1. For example, there is a filter box that requires single or multiple selections when switching tabs. But when I switch from single to multiple, the multiple drop-down box doesn’t show up. This is a typical Vue solution to the problem of rendering components without duplicating them: add random keys to components.

Harvest feelings

  1. The reconstruction of this component gave me the feeling that I wrote too little code. I wrote the reconstruction twice this time, because I did not think well in the first time, did not determine the requirements, and wrote in disorder.
  2. I think about what’s good to do, how framework works for the system
  3. Familiar with element and ivant frameworks