有时候大家必定在想，我能不能间接一个columns,间接进去一个表格,我以前分享过相似表单的封装，明天给大家带来表格的封装，心愿能帮忙到须要的人，如果有帮忙到你，能够点个赞

<template>  <div>    <v-table :data="tableData" :columns="columns"> </v-table>  </div></template><script>export default {  data() {    return {      tableData: [        {          date: '2016-05-02',          name: '王小虎',          address: '上海市普陀区金沙江路 1518 弄',        },        {          date: '2016-05-04',          name: '王小虎',          address: '上海市普陀区金沙江路 1517 弄',        },        {          date: '2016-05-01',          name: '王小虎',          address: '上海市普陀区金沙江路 1519 弄',        },        {          date: '2016-05-03',          name: '王小虎',          address: '上海市普陀区金沙江路 1516 弄',        },      ],      columns: [        {          prop: 'date',          label: '日期',        },        {          prop: 'name',          label: '题目',        },        {          prop: 'address',          label: '地址',        }      ],    };  }};</script>

怎么实现呢？是不是能够在element-ui的根底上再封装一层呢？！！！上代码

<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>

十分的简略一般就达到的咱们想要的目标，如果你认为到这就满足了需要你就错了。

  1. 能不能间接传一个异步接口？
  2. 能不能兼容slot?
  3. 能不能兼容element的el-table
    答案必定是能够的嘛，不然我写进去干嘛，间接上菜
//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="handleDelete(scope.$index, scope.row)"          >删除</el-button        >      </template>    </v-table>  </div></template>// 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>

后续

  • 封装分页
  • 封装表格筛选表单
    大家能够依据本人的需要在这个根底下来做扩大