Design of TTable

TTable The design of the

The component has a ElementUI Table The components are repackaged , Define the columns of the table by declaring the configuration , Reduce template writing .

Let's take a look first ElementUI Medium table Use ：

  <template>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label=" date " width="180">
      </el-table-column>
      <el-table-column prop="name" label=" full name " width="180">
      </el-table-column>
      <el-table-column prop="address" label=" Address ">
      </el-table-column>
    </el-table>
  </template>
  <script> export default {
       data() {
       return {
       tableData: [{
       date: '2016-05-02', name: ' X.h. ', address: ' Jinshajiang road, putuo district, Shanghai  1518  get ' }, {
       date: '2016-05-04', name: ' X.h. ', address: ' Jinshajiang road, putuo district, Shanghai  1517  get ' }, {
       date: '2016-05-01', name: ' X.h. ', address: ' Jinshajiang road, putuo district, Shanghai  1519  get ' }, {
       date: '2016-05-03', name: ' X.h. ', address: ' Jinshajiang road, putuo district, Shanghai  1516  get ' }] } } } </script>

You can see el-table Accept only one data Of prop value , For each column of data, you need to manually write one el-table-column,TTable The design idea of is to introduce a columns Value to dynamically generate column data .

props

prop	type	Whether it is necessary to transmit	describe
data	Array	yes	ElTable Of data
columns	Array	no	Configure table columns , Similar to writing ElTableColumn

Undeclared attrs Will act as props Pass to ElTable Components , So theoretically it supports any ElTable Of props,ElTable Of props Reference resources ElementUI file

The source code to achieve

This function is not complicated . The first is the definition props, We mentioned earlier that we only need two prop

export default {
    
  name: "TTable",
  props: {
    
    data: {
    
      type: Array,
      require: true
    },
    columns: {
    
      type: Array,
      default: () => []
    }
  }
}

The most important thing is render Function , Need to deal with columns

render(h) {
    
  const children = [];
  this.columns.forEach(props => {
    
    const data = {
    props}
    children.push(h('elTableColumn', data))
  })
  return h(
    'ElTable',
    {
    
      props: {
    ...this.$attrs, data: this.data},
      on: {
    ...this.$listeners},
      ref: 'table'
    },
    children
  )
}

take columns All values in are treated as data Passed in to generate VNode, For other parameters that are not used, use as attrs And $listeners Pass in ElTable in （ In other words, it theoretically supports any ElTable Of props）.

Of course, we also need to consider in el-table-column Pass in slot The situation of .

Here we first define slot It's a kind of reference

• slotName: Slot name , And v-slot:xxx Medium xxx Corresponding ,
• headerSlotName: Slot column label, The same as the normal column label, When it exists at the same time label And headerSlotName when , With headerSlotName Subject to

ok, After defining the parameter name , We are render Function slot The situation of .

render(h) {
    
  const children = [];
  this.columns.forEach(props => {
    
    const data = {
     props }
    const {
     slotName, headerSlotName } = props;

    //  There is slotName, Explain that the user has written that he wants to insert slot
    if(slotName) {
    
      data.scopedSlots = {
    
        default: this.$scopedSlots[slotName],
        header: this.$scopedSlots[headerSlotName]
      }
    }
    children.push(h('elTableColumn', data))
  })
  return h(
    'ElTable',
    {
    
      props: {
    ...this.$attrs, data: this.data},
      on: {
    ...this.$listeners},
      ref: 'table'
    },
    children
  )
}

thus , The whole thing is probably finished , But let's see ElTable There is another one in the source code of slot

<div v-if="$slots.append" class="el-table__append-gutter" :style="{ height: layout.appendHeight + 'px'}"></div>
</div>

This slot is in table Add an element to the last line of the . We are perfecting this .

render(h) {
    
  const children = [];
  this.columns.forEach(props => {
    
    const data = {
     props }
    const {
     slotName, headerSlotName } = props;

    //  There is slotName, Explain that the user has written that he wants to insert slot
    if(slotName) {
    
      data.scopedSlots = {
    
        default: this.$scopedSlots[slotName],
        header: this.$scopedSlots[headerSlotName]
      }
    }
    children.push(h('elTableColumn', data))
  })
  if (this.$scopedSlots.append) {
    
    const appendVnodes = this.$scopedSlots.append();
    appendVnodes.forEach(vnode => {
    
    //  Conditions under which named slots will be classified ：context  For the current component ,data.slot != null
    // data  That is to say  h  The second argument to the function 
      vnode.context = this._self;
      vnode.data = {
     slot: 'append' };
    });
    children.push(...appendVnodes);
  }

  children.push(this.$scopedSlots.default ? this.$scopedSlots.default() : []);
  return h(
    'ElTable',
    {
    
      props: {
    ...this.$attrs, data: this.data},
      on: {
    ...this.$listeners},
      ref: 'table'
    },
    children
  )
}

<TTable :data="tableData" :columns="tableColumns" >
  <template v-slot:operate="data">
    <el-button @click="handleDelete(data)"> Delete </el-button>
  </template>
  <div slot="append" style="text-align: center">
    <!-- Add here what you want to insert in the last row of the table -->
     test 
  </div>
</TTable>

Of course , We also need to bind Events .

const elTableMethods = ['clearSelection', 'toggleRowSelection', 'toggleAllSelection', 'toggleRowExpansion', 'setCurrentRow', 'clearSort', 'clearFilter', 'doLayout', 'sort'];

mounted() {
    
  elTableMethods.map(methodName => (this[methodName] = this.$refs.table[methodName]));
}

such , our TTable It's done. .

Last

Source check ：https://github.com/leopord-lau/Twpage

npm install

npm i twpage --save-dev