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 call方法使用说明
Jan 11 Javascript
Javascript 颜色渐变效果的实现代码
Oct 01 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
使用jQuery仿苹果官网焦点图特效
Dec 23 Javascript
JavaScript数据结构和算法之二叉树详解
Feb 11 Javascript
js代码实现无缝滚动(文字和图片)
Aug 20 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
Jul 25 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
VUE 单页面使用 echart 窗口变化时的用法
Jul 30 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连mysql和oracle数据库性能比较
2006/10/09 PHP
php zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
php foreach、while性能比较
2009/10/15 PHP
php实现监控varnish缓存服务器的状态
2014/12/30 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
js jquery获取随机生成id的服务器控件的三种方法
2013/07/11 Javascript
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
把字符串按照特定的字母顺序进行排序的js代码
2014/01/28 Javascript
基于jquery实现瀑布流布局
2020/06/28 Javascript
原生JavaScript实现Tooltip浮动提示框特效
2017/03/07 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
axios使用拦截器统一处理所有的http请求的方法
2018/11/02 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
Web服务器框架 Tornado简介
2014/07/16 Python
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
python实现抽奖小程序
2020/04/15 Python
scrapy-splash简单使用详解
2021/02/21 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
微博营销计划书
2014/01/10 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
领导参观欢迎词
2015/01/26 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
会议通知
2015/04/15 职场文书
无线电通信名词解释
2022/02/18 无线电
十大冰系宝可梦排名,颜值最高的阿罗拉九尾,第三使用率第一
2022/03/18 日漫