FIVE: ElementUI table Table with pagination Pagination Vue of component-based

 

  In the usual web project development process, list paging query to show the application is very frequent, for readability and reduce redundant code, so ElementUI table and paging component was the second package.

 

In the first project components to create a directory common folder and create a new commonTable.vue file, add the following code:

<template>
    <div id="commonTable">
        <el-table :data="data" :max-height="maxHeight" border stripe tooltip-effect="light" @selection-change="handleSelectionChange">
            <slot name="table_oper"/>
            <template v-for="(item, index) in columns">
                <el-table-column 
                    v-if="item.show != false"
                    :key="index"
                    :prop="item.prop" 
                    :label="item.label"
                    :align="item.align?item.align:'center'"
                    :width="item.width"
                    :formatter="item.formatter?item.formatter : formatterValue"
                >
                </el-table-column>
            </template>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            style="text-align: center;margin:20px 0;"
            :current-page="pager.pageNo"
            :page-size="pager.limit"
            :page-sizes="pager.sizes"
            :total="pager.total"
            layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
    </div>
</template>

<script>
export default {
    name: 'commonTable',
    props: {
        columns: Array,
        data: Array,
        pager: Object,
        maxHeight: {
            type: Number,
            default: 2000
        }
    },
    methods: {
        handleSelectionChange(val) {
            this.$emit('handleSelectionChange', val);
        },
        handleSizeChange(val) {
            this.$emit('handleSizeChange', val);
        },
        handleCurrentChange(val) {
            this.$emit('handleCurrentChange', val);
        },
        formatterValue(row, column, cellValue) {
            return cellValue;
        }
    }
}
</script>

 

Then components in the new directory index.js file and add the code below:

import commonTable from './common/commonTable'

export default {
  install(Vue) {
    Vue.component('commonTable', commonTable)
  }
}

 

The code is custom components in Vue registered in, the Component method first parameter is critical, is the component name when we call in other components later. Note: All other components of the subsequent custom also only need to register in the file.

 

Finally main.js use Vue.use () method to install custom components, specifically implemented as follows:

import components from '@/components/index.js';
Vue.use(components);

 

It can be used in any other pages after completing all the above steps. The assembly package list some common features, such as multiple choice, flip, the maximum height of the table, a separate format, explicit and implicit custom columns such as other separate sorting, the default column number display according to the actual needs can add their own package .

 

Then talk about how to use the component, look at the following component references:

Wherein Columns (column attribute information), TableData (table data) and Page (paging parameters) of data sub-assembly must be passed to, handleSizeChange and handleCurrentChange is to change the size of a single page and data page event handler, and then through the slot slot in the modified data manipulation manner.

 

The complete code to achieve the following:

<template>
  <div>
    <commonTable :columns="columns" :data="tableData" :pager="page" @handleSizeChange="handleSizeChange" 
      @handleCurrentChange="handleCurrentChange">
      <el-table-column slot="table_oper" align="center" label="操作" width="150" :resizable="false">
          <template slot-scope="scope">
              <el-button class="edit-bgc" icon="el-icon-edit" @click="editTableData(scope.row)">修改</el-button>
          </template>
      </el-table-column>
    </commonTable>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {prop: 'date', label: '日期', width: '150', align: 'left'},
        {prop: 'name', label: '姓名', width: '200', align: 'center', formatter: this.formatter},
        {prop: 'address', label: '地址', align: 'right'}
      ],
      tableData: [],
      page: {
        pageNo: 1,
        limit: 10,
        sizes: [10, 50, 100],
        total: 0
      }
    }
  },
  mounted() {
    this.tableData = [
        {date: '2016-05-02', name: 'Xiaohu', address: 'Jinsha Putuo District Road Lane 1518' }, 
        {DATE: '2016-05-04', name: 'Xiaohu', address: 'Shanghai Putuo District Jinsha Road Lane 1517 ' }, 
        {DATE: ' 2016-05-01 ', name:' Xiaohu ', address:' Jinsha Putuo District Road Lane 1519 ' }, 
        {DATE: ' 2016-05 -03 ', name:' Xiaohu ', address:' Putuo District Jinsha Road Lane 1516 ' } 
      ]; 
    the this .page.total = the this .tableData.length; 
  }, 
  Methods: { 
    // re-rendering of the name column 
    formatter (Row, column, CellValue) {
       return 'Hello' + row.name; 
    },
    // change the page size processing 
    handleSizeChange (Val) { 
      
    },
    // turning processing 
    handleCurrentChange (Val) { 
      
    }, 
    editTableData (Row) {} 
  } 
}
 </ Script>

View Code

 

Page shows results as shown below:

 

Because in the name of the column name field is formatted in the name of value before the value unified increased the Hello ; but in reality the project application, acquisition and processing of paged table data transfer request to be sent back through the interface.

 

These are custom package and use the list of components. At the same time it, Benpian also introduced vue registration method of global components .