op teble UI组件 PHP,element-ui怎样实现复用Table的组件

这次给大家带来element-ui怎样实现复用Table的组件，element-ui实现复用Table组件的注意事项有哪些，下面就是实战案例，一起来看一下。

饿了么的table组件功能很强大，对于项目中的各种表格基本够用，但是……个人对于它以列为单位的操作不习惯 =。=所以改成了另一种方式(我不会告诉你其实本质没变)。

项目中表格较多，所以复用性最重要

步骤一

先来个基本的表格展示

官例的tableDatatableData: [{

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

步骤二

简化一下表格：//table.vue

:key="key"

:prop="item.value"

:label="item.name">

export default{

name: 'table',

data(){

return{

tableData:[...],

tableKey: [{

name: 'date',

value: '日期'

},{

name: '姓名',

value: 'name'

},{

name: '地址',

value: 'address'

}]

}

}

}

步骤三

复用table.vue就是————给它数据的同时告诉它我的字段名呗

新建一个父组件sl_table.vue//sl_table.vue

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

}

}

table.vue就更简单了//table.vue

:key="key"

:prop="item.value"

:label="item.name">

export default{

name: 'table',

data(){

return{

}

},

props:['tableData','tableKey'],

}

步骤四

可以根据需求修改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

...

:key="key"

:prop="item.value"

:label="item.name"

:width="item.width">

...

自定义模板列

如果我们需要告诉组件哪个是自定义的列，所以添加一个属性operate

table.vue

v-if="!item.operate"

:key="key"

:prop="item.value"

:label="item.name"

:width="item.width">

//sl_table.vue

{{ scope.row.date | DateFilter }}

...

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

{{...expand something}}

...

table.vue//table.vue

...

props: ['tableData','tableKey','isExpand','isExpandOnly'],

methods: {

handleExpand(row,is_expand){

if(this.isExpand && this.isExpandOnly){

this.$refs.raw_table.store.states.expandRows = expanded ? [row] : []

}

}

}

其他的(排序、多选)操作也是类似添加。。。多不赘述。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：