饿了么的table组件功能很强大，对于项目中的各种表格基本够用，但是……个人对于它以列为单位的操作不习惯 =。=所以改成了另一种方式（我不会告诉你其实本质没变）。
项目中表格较多，所以复用性最重要
步骤一
先来个基本的表格展示
官例的tableData
rush:js;">
tableData: [{
date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'
},{
date: '2016-05-04',address: '上海市普陀区金沙江路 1517 弄'
},{
date: '2016-05-01',address: '上海市普陀区金沙江路 1519 弄'
},{
date: '2016-05-03',address: '上海市普陀区金沙江路 1516 弄'
}]
table.vue
rush:js;">
步骤二
简化一下表格：
rush:js;">
//table.vue
步骤三
复用table.vue就是————给它数据的同时告诉它我的字段名呗
新建一个父组件sl_table.vue
rush:js;">
//sl_table.vue
table.vue就更简单了
rush:js;">
//table.vue
修改table的形式
列宽度
这个较为简单，可以直接加个属性
rush:js;">
//sl_table.vue
...
data(){
return {
tableData: [...]
tableKey: [{
name: 'date',value: '日期',width: 80
},value: 'name',...
table.vue
rush:js;">
//table.vue
...
...
自定义模板列
如果我们需要告诉组件哪个是自定义的列，所以添加一个属性operate
table.vue
rush:js;">
cope="scope">
cope.$index" :row="scope.row">
//sl_table.vue
cope="scope">
{{ scope.row.date | datefilter }}
...
data(){
return {
tableData: [...]
tableKey: [{
name: 'date',operate: true
},{
name: '姓名',operate: false
},{
name: '地址',value: 'address',operate: false
}]
}
},filters: {
datefilter(){...}
}
...
表格展开行
类似宽度，只要sl_table.vue传入一个isExpand的属性。这里加个每次只能展开一行的效果：
rush:js;">
//sl_table.vue
<sl-table :tableData="tableData" :tableKey="tableKey" :isExpand="true" :isExpandOnly="true">
<template slot="expand" scope="scope">
{{...expand something}}
table.vue
rush:js;">
//table.vue
cope="scope">
cope.$index" :row="scope.row">
...
props: ['tableData','tableKey','isExpand','isExpandOnly'],methods: {
handleExpand(row,is_expand){
if(this.isExpand && this.isExpandOnly){
this.$refs.raw_table.store.states.expandRows = expanded ? [row] : []
}
}
}
其他的（排序、多选）操作也是类似添加。。。多不赘述。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
原文地址：https://www.jb51.cc/vue/35157.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
