• React users know that proComponents is a powerful page component, especially the table component, which greatly reduces the amount of code required to query tables and only handles the logic of buttons. However, there is no similar component on Vue.
  • In this case, do it yourself, the first is to achieve the appearance of the future

  • Because it is packaged based on ANTD Vue 2.x, it can only be used with vue3. X, and the built-in props and slots for components are all uninherited, including attrs
  • Let’s talk about the process
The graph TD component internally accepts columns -> secondary processing of columns -> generate query objects -> generate form elements
  • Because of digging gold editor is not familiar, or with the text in the explanation once
  • First of all, the component conducts in-depth monitoring on the columns that are passed
    watch(() = > props.columns, (newVal) = > {
      // Do a secondary processing on columns
    }, {
      deep: true.immediate: true
    })
Copy the code
  • Columns are a complex type and in most cases are written dead, i.e. the page is loaded immediately. Therefore, columns need to be monitored because there are a combination of tabs and tables. That’s why we need to listen in
  • What did I do in this step
  • It’s just adding some variables so we can control the table, for example
  const markColumns = (cols: Comment.cols) = > {
  const cloneColumns: Comment.cols= util.data.deepCopy(cols)
  cloneColumns.forEach(col= >{ col.type ?? ='text'
    // The generated form element typecol.isShow ?? =true
    // Users can manually control whether to hide the columncol.search ?? =false
    // Whether to generate form elements})}Copy the code

  • Can add far more than these, such as weight form sorting, or entry key and so on, many, and even can automatically enumerate, display different colors, as long as we can facilitate the development of all add, only developers are the most understand developers

  • Of course, the form data object needs to be generated before the v-Model binds the data

    const createData = (cols: Comment.cols) = > {
      const data = {}
      cols.forEach(col= > {
        data[col.dataIndex] = 'xxx'
        // We need to v-model whether it's an empty string or an array or some other type depending on the type of the form element})}Copy the code
  • Finally, after generating columns that actually render the form elements, you only need to slice with the columns processed above because you need to show and hide them dynamically
    const showColumns = computed(() = > cloneColumns.slice(0.3))
    const hideColumns = computed(() = > cloneColumns.slice(3))
Copy the code
  • Just render the showColumns, and hideColumns shows and hides dynamically based on variables
  • Finally, there are some interface processing of form elements, such as options of select, which can be carried out through transfer functions or packets, and maybe a little more complicated is linkage and so on
  • If you see the rest of the functionality here, you should be able to extend it on your own
  • The code will not go up, because there is no separate put forward at present, if you are interested in it, you can open a post to analyze the detailed ideas and complete code