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.
- Can you just pass an asynchronous interface?
- Is slot compatible?
- 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