Sometimes you must be wondering whether I can directly create columns and directly create a table

<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: Lane 1518, Jinshajiang Road, Putuo District, Shanghai}, {date: '2016-05-04'.name: 'Wang Xiaohu'.address: Lane 1517, Jinshajiang Road, Putuo District, Shanghai}, {date: '2016-05-01'.name: 'Wang Xiaohu'.address: Lane 1519, Jinshajiang Road, Putuo District, Shanghai}, {date: '2016-05-03'.name: 'Wang Xiaohu'.address: Lane 1516, Jinshajiang Road, Putuo District, Shanghai],},columns: [{prop: 'date'.label: 'date'}, {prop: 'name'.label: 'title'}, {prop: 'address'.label: 'address',}]}; }};</script>

Copy the code

How do you do that? Is it possible to wrap another layer on top of the 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>

Copy the code

It’s very simple and simple to achieve what we want, and if you think that’s what you need you’re wrong.

  1. Can you just pass an asynchronous interface?
  2. Is slot compatible?
  3. Is it compatible with Element’s EL-table

The answer must be yes. Why else would I write it? Just serve it

//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)"
          >Edit < / el - button ><el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >Delete < / 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>

Copy the code

subsequent

  • Encapsulation paging
  • The encapsulated table filters the form

You can expand on this basis according to your own needs