VUE element-ui 写个复用Table组件的示例代码

饿了么的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] : [] 
  }
 }
}

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。