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

2019-11-19 14:54:48

字体：大中小

来源：转载

供稿：网友

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

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

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

上一篇：Angular中支持SCSS的方法

下一篇：NodeJS实现视频转码的示例代码