小编给大家分享一下VUE中element-ui如何实现一个复用Table组件，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
步骤一
先来个基本的表格展示
官例的tableData
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 弄'
}]table.vue
<template>
<el-table :data="tableData" border>
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>步骤二
简化一下表格：
//table.vue
<template>
<el-table :data="tableData" border>
<el-table-column v-for="(item,key) in tableKey"
:key="key"
:prop="item.value"
:label="item.name"></el-table-column>
</el-table>
</template>
<script>
export default{
name: 'table',
data(){
return{
tableData:[...],
tableKey: [{
name: 'date',
value: '日期'
},{
name: '姓名',
value: 'name'
},{
name: '地址',
value: 'address'
}]
}
}
}
</script>步骤三
复用table.vue就是————给它数据的同时告诉它我的字段名呗
新建一个父组件sl_table.vue
//sl_table.vue
<template>
<sl-table :tableData="tableData" :tableKey="tableKey"></sl-table>
</template>
<script>
import Table from '@/components/table'
export default{
name: 'sl-table',
data(){
return {
tableData: [...]
tableKey: [{
name: 'date',
value: '日期'
},{
name: '姓名',
value: 'name'
},{
name: '地址',
value: 'address'
}]
}
},
components: {
'sl-table': Table
}
}
</script>table.vue就更简单了
//table.vue
<template>
<el-table :data="tableData" border>
<el-table-column v-for="(item,key) in tableKey"
:key="key"
:prop="item.value"
:label="item.name"></el-table-column>
</el-table>
</template>
<script>
export default{
name: 'table',
data(){
return{
}
},
props:['tableData','tableKey'],
}
</script>步骤四
可以根据需求修改table的形式
列宽度
这个较为简单，可以直接加个属性
//sl_table.vue
...
data(){
return {
tableData: [...]
tableKey: [{
name: 'date',
value: '日期',
width: 80
},{
name: '姓名',
value: 'name',
width: 80
},{
name: '地址',
value: 'address'
}]
}
},
...table.vue
//table.vue
...
<el-table-column v-for="(item,key) in tableKey"
:key="key"
:prop="item.value"
:label="item.name"
:width="item.width"></el-table-column>
...自定义模板列
如果我们需要告诉组件哪个是自定义的列，所以添加一个属性operate
table.vue
<el-table-column v-for="(item,key) in tableKey"
v-if="!item.operate"
:key="key"
:prop="item.value"
:label="item.name"
:width="item.width"></el-table-column>
<!-- 自定义 -->
<el-table-column v-else>
<template scope="scope">
<slot :name="item.value" :$index="scope.$index" :row="scope.row"></slot>
</template>
</el-table-column>
//sl_table.vue
<sl-table :tableData="tableData" :tableKey="tableKey">
<template slot="date" scope="scope">
<span>{{ scope.row.date | DateFilter }}</span>
</template>
</sl-table>
...
data(){
return {
tableData: [...]
tableKey: [{
name: 'date',
value: '日期',
operate: true
},{
name: '姓名',
value: 'name',
operate: false
},{
name: '地址',
value: 'address',
operate: false
}]
}
},
filters: {
DateFilter(){...}
}
...表格展开行
类似宽度，只要sl_table.vue传入一个isExpand的属性。这里加个每次只能展开一行的效果：
//sl_table.vue
<sl-table :tableData="tableData" :tableKey="tableKey" :isExpand="true" :isExpandOnly="true">
<template slot="expand" scope="scope">
{{...expand something}}
</template>
...
</sl-table>table.vue
//table.vue
<el-table :data="tableData" border @expand="handleExpand" ref="raw_table">
<el-table-column v-if="isExpand" type="expand">
<template scope="scope">
<slot name="expand" :$index="scope.$index" :row="scope.row"></slot>
</template>
</el-table-column>
</el-table>
...
props: ['tableData','tableKey','isExpand','isExpandOnly'],
methods: {
handleExpand(row,is_expand){
if(this.isExpand && this.isExpandOnly){
this.$refs.raw_table.store.states.expandRows = expanded ? [row] : []
}
}
}看完了这篇文章，相信你对“VUE中element-ui如何实现一个复用Table组件”有了一定的了解，如果想了解更多相关知识，欢迎关注编程网行业资讯频道，感谢各位的阅读！
