How to encapsulate query components based on element-ui step by step

Function
Basic query functions
Query condition initialization
Rendering the page
More query and display optimization
Pull-down component linkage query
Component extension
Search condition display
Add function button area
Final Thoughts

Function

Following the previous article, which encapsulates a more useful table component based on the element-ui framework, we start writing the query component. What does a query component need? Below I have drawn a rough prototype that basically describes the functions that the query component needs to implement.

insert image description here

Basic query function [Enter conditions, select drop-down data and click query]

Add a query drop-down panel [If there are many queries, one line cannot be put, and more query drop-down panels are needed. Except for the default query conditions, put them all in the drop-down panel. Put a few specific default query conditions, which can be controlled by the passed in parameters]

Add conditional display [If there are more query panels, if you don’t open the query panel, you won’t know what conditions the data is based on.]

Add function button area [usually place function buttons for batch operations such as adding, deleting, and modifying]

Basic query functions

For the query function, we need to use the input box, drop-down box, date box and other components of element-ui to implement it. If we use our component, we hope to use an array to describe the query condition, and then the component will identify and render the condition according to the array. First, we have to define what this array looks like.

// methods
initSearch() {
  const searchArr = this.searchArr
  if (searchArr && searchArr.length) {
    let searchForm = {}
    searchArr.forEach((val) => {
      searchForm[val.key] = ''
    })
    this.searchForm = searchForm
  }
}
// mounted
mounted () {
    this.initSearch()
},

At present, the most basic are these three fields, and the meaning of the fields has been clearly stated in the code comments. There may be some other fields in this object. For example, the drop-down data is usually given to the front end through the background interface. We can add a url, param, and method here to define the name, parameters, and request method of the interface. Of course, we will talk about it later when we implement it. So let's start developing.

Query condition initialization

After we pass in the searchArr data from outside, we have to traverse it when it is mounted and set the responsive data for the query condition searchForm defined in the content.

// methods
initSearch() {
  const searchArr = this.searchArr
  if (searchArr && searchArr.length) {
    let searchForm = {}
    searchArr.forEach((val) => {
      searchForm[val.key] = ''
    })
    this.searchForm = searchForm
  }
}
// mounted
mounted () {
    this.initSearch()
},

Rendering the page

Because the query page we designed is divided into two parts, including the query conditions displayed outside and more query conditions displayed inside. In this case, if we define the structure in the template, we will find that we need to write duplicate code twice. If we expand new functions later, it will be another uncomfortable physical work. So we write jsx in the render function here, which can make the structure more flexible and the code can be better reused. Now that we have explained the idea, let's start writing code.

// props passes in a searchArr array to describe the query conditions/**
 * Query condition description */
searchArr: {
  type: Array,
  default: () => []
},
// data defines two variables, searchForm: the query field passed to the backend, selectOption: drop-down data searchForm: {},
selectOption: {}
// mounted initialize data initSearch () {
  const searchArr = this.searchArr
  if (searchArr && searchArr.length) {
    let searchForm = {}
    searchArr.forEach((val) => {
      searchForm[val.__key] = '' // Take out the user-defined field, put it in searchForm, and assign an empty string this.setOption(val) // If it is a drop-down data, assign the drop-down list to selectOption })
    this.searchForm = searchForm
  }
},
// methods set drop-down data async setOption (val) {
  if (~['select', 'mulSelect'].indexOf(val.__type)) {
    // In the first case, if the drop-down data is hard-coded locally if (val.data && Array.isArray(val.data)) {
      this.$set(this.selectOption, val.__key, val.data)
    } else if (val.fetchUrl) {
      // In the second case, if the pull-down data is passed from the background interface const result = await request({
        url: val.fetchUrl,
        method: val.method || 'post'
      })
      if (result && result.data && result.data.success) {
        this.$set(this.selectOption, val.__key, result.data.list || [])
      }
    }
  }
},

OK, after we complete the initialization work, we can start rendering. As we mentioned earlier, it will be more flexible to write jsx in the render function, so let's start writing this part.

// render function <div class="searchTable">
    <el-form
      inline={true}
      props={{model: this.searchForm}}
      ref="searchForm"
      class="searchForm">
      { 
        searchArr.map((o) => {
          return components[o.__type] ? components[o.__type](h, o, this) : ''
        })
      }
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" on-click={ queryTable }>Query</el-button>
        <el-form-item>
          <el-link 
            style="margin-left: 10px;"
            type="primary" 
            underline={ false } 
            on-click={ () => { this.moreShow = !this.moreShow } }>More queries</el-link>
        </el-form-item>
      </el-form-item>
      <div class="more-search animated" 
           class={ this.moreShow ? 'fadeInDown' : 'fadeOutUp' } 
           v-show={ this.moreShow }>
           // ...more queries</div>
    </el-form>
</div>

There is one thing worth noting about the operation in jsx. In the latest vue-cli, the use of v-model and other instructions in jsx is already supported, but the use of el-input in element-ui will report an error. The v-show instruction used below can be used. But in fact, v-model is just a syntactic sugar. Here we use the input event to get the latest input data, and then assign it to searchForm. This code is extracted because it is used for both the externally displayed query conditions and the collapsed query conditions. After it is extracted, there is no need to write repeated logic. The following are the extracted components

  /**
   * Why is the input box removed? Here we just need to do table query. 
   * In fact, if you want to encapsulate the form submission component like the pop-up window frame. You can also reuse the logic here* @param { Function } h h function provided by Vue* @param { Object } item description object written by the user* @param { Object } vm Vue instance*/
  export const input = function (h, item, vm) {
    const { searchForm } = vm
    return (
      <el-form-item label={item.label}>
        <el-input
          size="small"
          on-input={(v) => { searchForm[item.__key] = v }}
          props={{
            value: searchForm[item.__key],
            placeholder: "Enter content information",
            ...item
          }}
        >
        </el-input>
      </el-form-item>
    )
  }

  /**
   * 
   * @param { Function } h h function provided by Vue* @param { Object } item description object written by the user* @param { Object } vm Vue instance*/
  export const select = function (h, item, vm) {
    const { 
      searchForm = {}, 
      selectOption = {}, 
    } = vm
    /**
     * Listen for drop-down change events* @param { String | Number | Boolean } value Select the value of the drop-down data* @param { Object } value 
     */
    const selectChange = function (value, item) { 
      searchForm[item.__key] = value
      vm.$emit('on-change', value)
    }
    return (
      <el-form-item label={item.label}>
        <el-select
          props={{
            value: searchForm[item.__key],
            placeholder: "===Please select===",
            filterable: true,
            clearable: true,
            ...item
          }}
          on-change={ (val) => { selectChange(val, item) } }
          size="small">
            {
              selectOption[item.__key] && selectOption[item.__key].map((o) => {
                return (
                  <el-option 
                    key={ o.value } 
                    label={ o.text } 
                    value={ o.value } >
                  </el-option>
                )
              })
            }
        </el-select>
      </el-form-item>
    )
  }
  
    /**
   * 
   * For a multiple-select drop-down box, you can add two properties based on the single-select method. By writing this method, users can choose a few fewer words.
   * @param { Function } h h function provided by Vue* @param { Object } item description object written by the user* @param { Object } vm Vue instance*/
  export const mulSelect = function (h, item, vm) {
    item['multiple'] = true
    item['collapse-tags'] = true
    return select(h, item, vm)
  }

The above is actually a method to extract several components of element into independent ones. When we use them in external components, we can directly match the corresponding component rendering according to the type passed by the user. And if you want to add new query components later, you only need to expand it here without modifying other places. Easier to maintain. In addition, we have some default behaviors inside the component, such as the default drop-down search function and the default clear button. If the system does not need it, you can also write the corresponding attribute override in searchArr.

    return components[o.__type] ? components[o.__type](h, o, this) : ''

The basic rendering is done, and then we use the component outside

searchArr: [
    {
      __type: 'input',
      label: 'Name',
      __key: 'name'
    },
    {
      __type: 'select',
      label: 'gender',
      __key: 'sex',
      fetchUrl: '/getSelect',
      method: 'post'
      // data: [
      // { text: '男', value: '1' },
      // { text: 'Female', value: '0' },
      // ]
    },
]

Write the corresponding mock data

Mock.mock(/\/getSelect/, 'post', () => {
  return {
    status: 200,
    success: true,
    message: 'Get Success',
    list: [
      {
        text: 'Man',
        value: '1'
      },
      {
        text: 'Woman',
        value: '2'
      }
    ],
    total: data.list.length
  }
})

insert image description here

Ok, the above simply renders the conditions through array description. Next, we need to make more query conditions for the query panel.

More query and display optimization

The query conditions displayed outside are displayed according to the number given by the user. More queries can also be displayed in one row according to the parameters given by the user.

=============== props ===============
/**
 * How many external query conditions are displayed*/
frontCount: {
  type: Number,
  default: 2
},
/**
 * How many more query conditions are displayed*/
backCount: {
  type: Number,
  default: 3
}
================ end props ===============

=============== computed ===============
// The query conditions displayed on the page frontSearchArr: function () {
  return this.searchArr.slice(0, this.frontCount)
},
// Conditions displayed in more queries backSearchArr: function () {
  return this.searchArr.slice(this.frontCount, this.searchArr.length)
},
// Return width getSpan: function () {
  const yu = this.backSearchArr.length % this.backCount // remainder const duan = 24 / this.backCount // width of each condition if (yu === 0) {
    return 24
  } else {
    return 24 - duan
  }
}
================ end computed ===============

============== render ==============
  <div
    style={`width: ${this.backCount * 265 + 30}px`}
    class={ this.moreShow ? `${className} fadeInDown` : `${className} fadeOutUp` } 
    v-show={ this.moreShow }>
    <el-row>
    {
      backSearchArr.map((o) => {
        return (
          <el-col span={24 / this.backCount}>
            { components[o.__type] ? components[o.__type](h, o, this) : '' }
          </el-col>
        )
      })
    }
      <el-col class="searchBtn" span={ getSpan } >
        <el-button size="small" type="primary" icon="el-icon-search" on-click={ queryTable }>Query</el-button>
        <el-button size="small" type="default" icon="el-icon-upload2" on-click={ () => { this.moreShow = !this.moreShow } }>Shrink</el-button>
      </el-col>
    </el-row>
  </div>
=============== end render ==============

Set the externally displayed data and the internally displayed data in the calculated properties. Cut the data into two parts. The search component has a fixed length of 265. Then calculate the width of the query panel based on the conditions, and then calculate the span width of each row of data based on the getSpan calculation property. The query and shrink buttons are calculated based on the number of query conditions to determine where to put them.

insert image description here

After testing, the effect basically meets the requirements.

Pull-down component linkage query

For example, if we need to use our query component to write a three-level linkage, how should we implement it?

After selecting a province, you need to load the corresponding city drop-down data based on the selected province

If you delete a province, you need to clear the corresponding province and city drop-downs.

The linkage mainly focuses on these two functions. One is to load the corresponding data, and the other is to clear the corresponding data. OK, now that we know what needs to be done, let's start doing it.

{
  __type: 'select',
  __key: 'province',
  __fetchUrl: '/getProvince',
  __method: 'get',
  __nextKey: 'city',
  __nextFetch: '/getCity',
  __nextParam: ['province'],
  __nextMethod: 'get',
  __emptyArr: ['city', 'district'],
  label: 'province',
  labelWidth: '40px',
},
{
  __type: 'select',
  __key: 'city',
  __method: 'get',
  __nextKey: 'district',
  __nextFetch: '/getDistrict',
  __nextParam: ['province', 'city'],
  __nextMethod: 'get',
  __emptyArr: ['district'],
  label: 'city',
  labelWidth: '40px',
},
{
  __type: 'select',
  __key: 'district',
  label: 'district',
  labelWidth: '40px',
}

To get the provincial data, you only need to write __fetchUrl: '/getProvince' and __method: 'get' to define the request interface and you can get the drop-down data. Then when you select a province and drop down, you need to request data based on the selected province in the change event. At this time, we need to define what needs to be done when changing in the data. Let's take a look at the code below:

__nextKey: 'city', // Which drop-down data is assigned a value__nextFetch: '/getCity', // Request interface for assignment__nextParam: ['province'], // Request parameter__nextMethod: 'get', // Request method__emptyArr: ['city', 'district'] // When the drop-down data is modified, which drop-down categories need to be cleared/**
 * Listen for drop-down change events* @param { String | Number | Boolean } value Select the value of the drop-down data* @param { Object } value 
 */
const selectChange = async function (value, item) { 
  searchForm[item.__key] = value
  // Empty the drop-down list and drop-down data if (item && item.__emptyArr) {
    for (let i = 0; i < item.__emptyArr.length; i++) {
      let key = item.__emptyArr[i]
      if (selectOption[key]) {
        selectOption[key] = []
      }
      vm.$set(searchForm, key, '')
    }
  }
  if (item && item.__nextFetch && item.__nextParam) {
    let param = {}
    for (let j = 0; j < item.__nextParam.length; j++) {
      let value = searchForm[item.__nextParam[j]]
      if (value) {
        param[item.__nextParam[j]] = value
      }
    }
    const res = await request({
      url: item.__nextFetch,
      method: item.__nextMethod || 'post'
    }, param)
    if (res) {
      let { data } = res
      if (data && data.success) {
        vm.$set(selectOption, item.__nextKey, data.list)
      }
    }
  }
  vm.$emit('on-change', value)
}

Ok, this basically completes the three-level linkage function. The following is the effect diagram

insert image description here

Component extension

Component expansion is very simple. If we are still missing some required components, we can directly add a new one in components.js

/**
 * Date picker * @param {*} h 
 * @param {*} item 
 * @param {*} vm 
 */
export const date = function (h, item, vm) {
  const { searchForm } = vm
  return (
    <el-form-item label={item.label} labelWidth={item.labelWidth}>
        <el-date-picker
        on-input={(v) => { searchForm[item.__key] = v }}
        props={{
          type: 'date',
          size: 'small',
          value: searchForm[item.__key],
          placeholder: "Select a date",
          ...item
        }}
      >
      </el-date-picker>
    </el-form-item>
  )
}

// Add { when using searchArr
  __type: 'date',
  __key: 'birthday',
  label: 'birthday'
}

No other changes are needed to complete the addition of a new query condition type. The following is the effect

insert image description here

Search condition display

The search condition function is relatively simple, that is, after the user clicks the search, the input conditions are displayed. We separate this as an independent widget

        <query-info ref="queryInfo" on-remove={this.removeTag} selectionOption={ this.selectOption }></query-info>

This component passes the drop-down array to the component. When we designed it, we said that it can also delete the conditions by clicking the cross, so we have to throw a remove custom event. After deleting the conditions, we clear the conditions and call the query method. When querying, pass the search conditions to the component so that the component can be displayed. It should be noted here that we cannot directly pass the search criteria into the component through props. If we do so, since the data is responsive, it will be displayed below when you enter the criteria, which is not what we want. What we want is to display the query criteria when clicking the query button. So here, we directly call the internal method in the query button method to pass the criteria, and then use JSON.parse(JSON.stringify(val)) internally to achieve a deep copy to isolate the data from the external data.

removeTag (name) {
  this.searchForm[name] = ''
  this.queryTable()
}

// Query queryTable () {
  this.$refs.queryInfo && this.$refs.queryInfo.queryTable(this.searchForm)
  this.moreShow = false
  this.$emit('search', this.searchForm)
}

The implementation of the component is as follows:

<template>
  <div class="queryInfo">
    <el-tag
      v-for="tag in tags"
      :key="tag"
      closable
      style="margin-right: 10px;"
      @close="close(tag)"
      >
      {{displayName(tag)}}
    </el-tag>
  </div>
</template>

<script>
import { getTitle } from '@/utils/utils'
export default {
  props: {
    // Drop-down data selectionOption: {
      type: Object,
      default: () => []
    }
  },
  data () {
    return {
      // Query conditions searchForm: {}
    }
  },
  computed: {
    /// Calculate the input conditions array tags: function () {
      let tags = []
      let keys = Object.keys(this.searchForm)
      keys.forEach((key) => {
        if (this.searchForm[key]) {
          tags.push(key)
        }
      })
      return tags
    }
  },
  methods: {
    // Click to close close (tag) {
      this.searchForm[tag] = ''
      this.$emit('remove', tag)
    },
    // Externally called method queryTable (searchForm) {
      this.searchForm = JSON.parse(JSON.stringify(searchForm))
    },
    // Display name, if it is drop-down data, match the name in the drop-down data and display it displayName(key) {
      let value = this.searchForm[key]
      if (this.selectionOption[key]) {
        return getTitle(value, this.selectionOption[key])
      } else {
        return value
      }
    }
  }
}
</script>

<style scoped>
.queryInfo {
  margin-bottom: 10px;
}
</style>

The achieved effects are as follows:

insert image description here

Add function button area

This is currently added to the searchTable component using a slot

<div class="right">
  {this.$slots.rightButton}
</div>

// Use <search-table :searchArr="searchArr" @search="search">
  <template v-slot:rightButton>
    <el-button 
      size="small" 
      type="success" 
      @click="() => { MessageBox({ message: 'Under development', type: 'warning' })}">
      Add </el-button>
  </template> 
</search-table>
Copy code

Effect:

insert image description here

Final Thoughts

So far, some functions that the query component wants to achieve have been realized one by one. In fact, it is not complicated to do. The most important point is not to do it, but to think clearly before doing it. Later, we will make the dynamic header complete, so the relevant requirements for the table are basically completed.

You can also give a star to our open source project: http://github.crmeb.net/u/defu Thank you very much!

This is the end of this article on how to encapsulate query components based on element-ui step by step. For more relevant element-ui encapsulation query component content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: