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


Posted in Javascript onNovember 18, 2017

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
replace()方法查找字符使用示例
Oct 28 Javascript
JS自调用匿名函数具体实现
Feb 11 Javascript
瀑布流布局代码一例
Apr 11 Javascript
表单验证插件Validation应用的实例讲解
Oct 10 Javascript
js实现select下拉框菜单
Dec 08 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 Javascript
Node.js connect ECONNREFUSED错误解决办法
Sep 15 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
Mar 13 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
Feb 21 Javascript
深入浅析React中diff算法
May 19 Javascript
jQuery实现checkbox的简单操作
Nov 18 #jQuery
浅谈Emergence.js 检测元素可见性的 js 插件
Nov 18 #Javascript
基于jquery实现五星好评
Nov 18 #jQuery
基于JavaScript实现五子棋游戏
Aug 26 #Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 #Javascript
Vue2.0设置全局样式(less/sass和css)
Nov 18 #Javascript
五步轻松实现JavaScript HTML时钟效果
Mar 25 #Javascript
You might like
PHP采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
JS backgroundImage控制
2009/05/19 Javascript
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
jquery中获取select选中值的代码
2011/06/27 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
浅析BootStrap Treeview的简单使用
2016/10/12 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
Node.js pipe实现源码解析
2017/08/12 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
理解 JavaScript EventEmitter
2018/03/29 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
vue created钩子函数与mounted钩子函数的用法区别
2020/11/05 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
Python中zfill()方法的使用教程
2015/05/20 Python
python简单实现刷新智联简历
2016/03/30 Python
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
Python实现PS图像调整黑白效果示例
2018/01/25 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
python游戏开发的五个案例分享
2020/03/09 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
2014年教师党员自我评价范文
2014/09/22 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
Python基础之元组与文件知识总结
2021/05/19 Python
如何使用SQL Server语句创建表
2022/04/12 SQL Server