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 用Node.js写Shell脚本[译]
Sep 20 Javascript
js禁止回车提交表单的示例代码
Dec 23 Javascript
JS获取select-option-text_value的方法
Dec 26 Javascript
JQuery处理json与ajax返回JSON实例代码
Jan 03 Javascript
jquery预加载图片的方法
May 27 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
Aug 11 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
vue.js中npm安装教程图解
Apr 10 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 Javascript
vue同个按钮控制展开和折叠同个事件操作
Jul 29 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
Protoss兵种对照表
2020/03/14 星际争霸
PHP strtotime函数详解
2009/12/18 PHP
PHP计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
php中防止恶意刷新页面的代码小结
2012/10/31 PHP
PHP数组循环操作详细介绍 附实例代码
2013/02/03 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
php生成zip文件类实例
2015/04/07 PHP
PHP数组函数知识汇总
2016/05/12 PHP
innerText和textContent对比及使用介绍
2013/02/27 Javascript
Javascript alert消息换行的方法
2013/08/07 Javascript
IE中的File域无法清空使用jQuery重设File域
2014/04/24 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
浅析创建javascript对象的方法
2016/05/13 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
对javascript继承的理解
2016/10/11 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
Vue SPA单页应用首屏优化实践
2018/06/28 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
Python守护进程用法实例分析
2015/06/04 Python
python列出目录下指定文件与子目录的方法
2015/07/03 Python
详解Ubuntu16.04安装Python3.7及其pip3并切换为默认版本
2019/02/25 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
Python音频操作工具PyAudio上手教程详解
2019/06/26 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
伦敦高达60%折扣的钻石珠宝商:Purely Diamonds
2018/06/24 全球购物
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
装修协议书范本
2014/04/21 职场文书
市场营销专业自荐书
2014/06/10 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
企业安全生产责任书范本
2014/07/28 职场文书
设备收款委托书范本
2014/10/02 职场文书