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 相关文章推荐
推荐:极酷右键菜单
Nov 29 Javascript
JavaScript学习历程和心得小结
Aug 16 Javascript
js内置对象 学习笔记
Aug 01 Javascript
jQuery入门基础知识学习指南
Aug 14 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 Javascript
jQuery 调用WebService 实例讲解
Jun 28 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
JS仿京东移动端手指拨动切换轮播图效果
Apr 10 Javascript
vue+iview 兼容IE11浏览器的实现方法
Jan 07 Javascript
简谈创建React Component的几种方式
Jun 15 Javascript
JavaScript实现前端网页版倒计时
Mar 24 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
多重?l件?合查?(一)
2006/10/09 PHP
php在服务器执行exec命令失败的解决方法
2012/03/03 PHP
php生成局部唯一识别码LUID的代码
2012/10/06 PHP
克隆一个新项目的快捷方式
2013/04/10 PHP
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
PHP获取星期几的常用方法小结
2018/12/18 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
js小技巧--自动隐藏红叉叉
2007/08/13 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
nodejs基础之常用工具模块util用法分析
2018/12/26 NodeJs
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
python中abs&amp;map&amp;reduce简介
2018/02/20 Python
Python paramiko模块使用解析(实现ssh)
2019/08/30 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
Python模拟键盘输入自动登录TGP
2020/11/27 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
I.T中国官网:精选时尚设计师单品网购平台
2018/03/26 全球购物
德国2018年度最佳在线药房:Bodfeld Apotheke
2019/11/04 全球购物
市三好学生主要事迹
2014/01/28 职场文书
十佳党员事迹材料
2014/08/28 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
支部书记四风问题对照检查材料
2014/10/04 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
八一建军节主持词
2015/07/01 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
bat批处理之字符串操作的实现
2022/03/16 Python