Sometimes you must be wondering whether I can directly create a column and a table. I have shared the package of similar forms before. Today I bring you the package of the table, hoping it can help people in need

<template> <div> <v-table :data="tableData" :columns="columns"> </v-table> </div> </template> <script> export default { Data () {return {tableData: [{date: '2016-05-02', name: 'Wang Xiaohu ', address:' 1518 Jinshajiang Road, Putuo District, Shanghai ',}, {date: '2016-05-04', address: 'Lane 1517, Jinshajiang Road, Putuo District, Shanghai ',}, {date: '2016-05-01', address: Address: Address: Lane 1516, Jinshajiang Road, Putuo District, Shanghai, China},], Columns: [{prop: 'date', label: 'date',}, {prop: 'name', label: 'title'}, {prop: 'address label:' address '}],}; }}; </script>

How do you do that? Is it possible to wrap another layer on top of Element-UI? !!!!!!!!! In the code

<script type="text/jsx"> export default { name: 'VTable', props: { columns: { required: true, type: Array, default: () => ([]) }, data: { type: Array, default: () => ([]) }, }, render(h) { return <div> <el-table props={{ data: this.data }}> { this.columns.map(item => { return <el-table-column props={{ ... item }} > </el-table-column> }) } </el-table> </div> } } </script>

It’s very simple. It’s very common. If you think that’s what you need, you’re wrong.

  1. Can you directly pass an asynchronous interface?
  2. Is it compatible with slot?
  3. Is it compatible with Element’s El-table? The answer must be yes. Otherwise, why should I write it out
//list.vue <template> <div> <v-table :table="{ size: 'medium' }" :api="getData" :columns="columns"> <template v-slot:name="scope">{{ scope.row.name }}</template> <template v-slot:action="scope"> <el-button size="mini" @click="handleEdit(scope.$index, Scope. Row)" > </el-button > <el-button size="mini" type="danger" @click=" handleDelect (scope.$index, scope. Vtable.vue <script type="text/ JSX "> export "vtable.vue <script type="text/ JSX "> export default { name: 'VTable', props: { columns: { required: true, type: Array, default: () => ([]) }, table: { type: Object, default: () => {} }, api: { required: true, type: Function, default: () => Promise.resolve({ list: [] }) } }, data() { return { data: [] } }, mounted() { this.getList() }, methods: { getList(params){ this.api({ ... params }).then(res => { let { list } = res this.data = list }) } }, render(h) { return <div> <el-table props={{ ... this.table, data: this.data }}> { this.columns.map(item => { return <el-table-column props={{ ... item }} > {this.$scopedSlots[item.prop]} </el-table-column> }) } </el-table> </div> } } </script>

subsequent

  • Encapsulation paging
  • Encapsulate form filter form you can according to their own needs on this basis to do the extension