关于vue.js:如何基于现有框架的table进行二次封装

8次阅读

共计 2026 个字符，预计需要花费 6 分钟才能阅读完成。

有时候大家必定在想，我能不能间接一个 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>

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

能不能间接传一个异步接口？
能不能兼容 slot?
能不能兼容 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>

后续