详解vue-cli+element-ui树形表格(多级表格折腾小计)


Posted in Javascript onApril 17, 2019

前沿

最近在项目开发中需要做一个多级表格,树形表格的功能,看看element-ui上没有,自己开是折腾,话不多说,上思路和代码。

效果图:

详解vue-cli+element-ui树形表格(多级表格折腾小计)

可点击收缩,展开。

一,首先创建一个公共的文件夹treeTable,里边放一个index.vue和eval.js

先看看index.vue,原理就是在element-ui的基础上做了进一步改造。

//利用element-ui的 <template slot-scope="scope">属性,在插入多级表格
<template>
 <el-table :data="formatData" :row-style="showRow" v-bind="$attrs">
  <el-table-column v-if="columns.length===0" width="150">
   <template slot-scope="scope">
    <span v-for="space in scope.row._level" class="ms-tree-space" :key="space"></span>
    <span class="tree-ctrl" v-if="iconShow(0,scope.row)" @click="toggleExpanded(scope.$index)">
     <i v-if="!scope.row._expanded" class="el-icon-plus"></i>
     <i v-else class="el-icon-minus"></i>
    </span>
    {{scope.$index}}
   </template>
  </el-table-column>
  <el-table-column v-else v-for="(column, index) in columns" :key="column.value" :label="column.text" :width="column.width">
   <template slot-scope="scope">
    <span v-if="index === 0" v-for="space in scope.row._level" class="ms-tree-space" :key="space"></span>
    <span class="tree-ctrl" v-if="iconShow(index,scope.row)" @click="toggleExpanded(scope.$index)">
     <i v-if="!scope.row._expanded" class="el-icon-plus"></i>
     <i v-else class="el-icon-minus"></i>
    </span>
    {{scope.row[column.value]}}
   </template>
  </el-table-column>
  <slot></slot>
 </el-table>
</template>

<script>
import treeToArray from './eval'
export default {
 name: 'treeTable',
 props: {
  data: {
   type: [Array, Object],
   required: true
  },
  columns: {
   type: Array,
   default: () => []
  },
  evalFunc: Function,
  evalArgs: Array,
  expandAll: {
   type: Boolean,
   default: false
  }
 },
 computed: {
  // 格式化数据源
  formatData: function() {
   let tmp
   if (!Array.isArray(this.data)) {
    tmp = [this.data]
   } else {
    tmp = this.data
   }
   const func = this.evalFunc || treeToArray
   const args = this.evalArgs ? Array.concat([tmp, this.expandAll], this.evalArgs) : [tmp, this.expandAll]
   return func.apply(null, args)
  }
 },
 methods: {
  showRow: function(row) {
   const show = (row.row.parent ? (row.row.parent._expanded && row.row.parent._show) : true)
   row.row._show = show
   return show ? 'animation:treeTableShow 1s;-webkit-animation:treeTableShow 1s;' : 'display:none;'
  },
  // 切换下级是否展开
  toggleExpanded: function(trIndex) {
   const record = this.formatData[trIndex]
   record._expanded = !record._expanded
  },
  // 图标显示
  iconShow(index, record) {
   return (index === 0 && record.children && record.children.length > 0)
  }
 }
}
</script>
<style rel="stylesheet/css">
 @keyframes treeTableShow {
  from {opacity: 0;}
  to {opacity: 1;}
 }
 @-webkit-keyframes treeTableShow {
  from {opacity: 0;}
  to {opacity: 1;}
 }
</style>

<style lang="scss" rel="stylesheet/scss" scoped>
 $color-blue: #2196F3;
 $space-width: 18px;
 .ms-tree-space {
  position: relative;
  top: 1px;
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  width: $space-width;
  height: 14px;
  &::before {
   content: ""
  }
 }
 .processContainer{
  width: 100%;
  height: 100%;
 }
 table td {
  line-height: 26px;
 }

 .tree-ctrl{
  position: relative;
  cursor: pointer;
  color: $color-blue;
  margin-left: -$space-width;
 }
</style>

eval.js

/**
 * @Author: hyf
 * @Date:  2018-10-27
 */
'use strict'
import Vue from 'vue'
export default function treeToArray(data, expandAll, parent = null, level = null) {
  let tmp = []
  Array.from(data).forEach(function(record) {
    if (record._expanded === undefined) {
      Vue.set(record, '_expanded', expandAll)
    }
    let _level = 1
    if (level !== undefined && level !== null) {
      _level = level + 1
    }
    Vue.set(record, '_level', _level)
      // 如果有父元素
    if (parent) {
      Vue.set(record, 'parent', parent)
    }
    tmp.push(record)
    if (record.children && record.children.length > 0) {
      const children = treeToArray(record.children, expandAll, record, _level)
      tmp = tmp.concat(children)
    }
  })
  return tmp
}

二,页面中的用法

<template>
 <div class="app-container">
  <tree-table :data="data" :columns="columns" border></tree-table>
 </div>
</template>

<script>
import treeTable from '@/components/TreeTable'
export default {
 name: 'treeTableDemo',
 components: { treeTable },
 data() {
  return {
   columns: [
    {
     text: '事件',
     value: 'event',
     width: 200
    },
    {
     text: 'ID',
     value: 'id'
    },
    {
     text: '时间线',
     value: 'timeLine'
    },
    {
     text: '备注',
     value: 'comment'
    }
   ],
   data: [
    {
     id: 0,
     event: '事件1',
     timeLine: 50,
     comment: '无'
    },
    {
     id: 1,
     event: '事件1',
     timeLine: 100,
     comment: '无',
     children: [
      {
       id: 2,
       event: '事件2',
       timeLine: 10,
       comment: '无'
      },
      {
       id: 3,
       event: '事件3',
       timeLine: 90,
       comment: '无',
       children: [
        {
         id: 4,
         event: '事件4',
         timeLine: 5,
         comment: '无'
        },
        {
         id: 5,
         event: '事件5',
         timeLine: 10,
         comment: '无'
        },
        {
         id: 6,
         event: '事件6',
         timeLine: 75,
         comment: '无',
         children: [
          {
           id: 7,
           event: '事件7',
           timeLine: 50,
           comment: '无',
           children: [
            {
             id: 71,
             event: '事件71',
             timeLine: 25,
             comment: 'xx'
            },
            {
             id: 72,
             event: '事件72',
             timeLine: 5,
             comment: 'xx'
            },
            {
             id: 73,
             event: '事件73',
             timeLine: 20,
             comment: 'xx'
            }
           ]
          },
          {
           id: 8,
           event: '事件8',
           timeLine: 25,
           comment: '无'
          }
         ]
        }
       ]
      }
     ]
    }
   ]
  }
 }
}
</script>

一下为一些整体思路,以及一些说明,方便后续使用

写在前面

此组件仅提供一个创建TreeTable的解决思路

prop说明

data

必填

原始数据,要求是一个数组或者对象

[{
  key1: value1,
  key2: value2,
  children: [{
   key1: value1
  },
  {
   key1: value1
  }]
 },
 {
  key1: value1
 }]

或者

{
   key1: value1,
   key2: value2,
   children: [{
    key1: value1
   },
   {
    key1: value1
   }]
  }

columns

列属性,要求是一个数组

text: 显示在表头的文字
value: 对应data的key。treeTable将显示相应的value
width: 每列的宽度,为一个数字(可选)

如果你想要每个字段都有自定义的样式或者嵌套其他组件,columns可不提供,直接像在el-table一样写即可,如果没有自定义内容,提供columns将更加的便捷方便

如果你有几个字段是需要自定义的,几个不需要,那么可以将不需要自定义的字段放入columns,将需要自定义的内容放入到slot中,详情见后文

[{
 value:string,
 text:string,
 width:number
},{
 value:string,
 text:string,
 width:number
}]

expandAll
是否默认全部展开,boolean值,默认为false

evalFunc
解析函数,function,非必须
如果不提供,将使用默认的evalFunc

evalArgs
解析函数的参数,是一个数组

请注意,自定义的解析函数参数第一个为this.data,第二个参数为, this.expandAll,你不需要在evalArgs填写。一定记住,这两个参数是强制性的,并且位置不可颠倒 this.data为需要解析的数据,this.expandAll为是否默认展开
如你的解析函数需要的参数为(this.data, this.expandAll,1,2,3,4),那么你只需要将[1,2,3,4]赋值给evalArgs就可以了
如果你的解析函数参数只有(this.data, this.expandAll),那么就可以不用填写evalArgs了

slot

这是一个自定义列的插槽。
默认情况下,treeTable只有一行行展示数据的功能。但是一般情况下,我们会要给行加上一个操作按钮或者根据当行数据展示不同的样式,这时我们就需要自定义列了。
slot和columns属性可同时存在,columns里面的数据列会在slot自定义列的左边展示

其他

如果有其他的需求,请参考el-table的api自行修改index.vue

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

Javascript 相关文章推荐
使用UglifyJS合并/压缩JavaScript的方法
Mar 07 Javascript
jQuery 在光标定位的地方插入文字的插件
May 10 Javascript
jquery zTree异步加载简单实例分享
Feb 05 Javascript
用JavaScript实现使用鼠标画线的示例代码
Aug 19 Javascript
通过设置CSS中的position属性来固定层的位置
Dec 14 Javascript
JavaScript计划任务后台运行的方法
Dec 18 Javascript
浅谈js中字符和数组一些基本算法题
Aug 15 Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
详细讲解JavaScript中的this绑定
Oct 10 Javascript
深入理解jquery中extend的实现
Dec 22 Javascript
浅谈express 中间件机制及实现原理
Aug 31 Javascript
抖音上用记事本编写爱心小程序教程
Apr 17 #Javascript
基于JS实现web端录音与播放功能
Apr 17 #Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
Apr 17 #Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 #Javascript
Vue项目路由刷新的实现代码
Apr 17 #Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 #Javascript
详解vue开发中调用微信jssdk的问题
Apr 16 #Javascript
You might like
计数器详细设计
2006/10/09 PHP
MySql中正则表达式的使用方法描述
2008/07/30 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
struts2 jquery 打造无限层次的树
2009/10/23 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
利用浏览器全屏api实现js全屏
2014/01/16 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
浅谈js中的this问题
2017/08/31 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
2017/10/25 Javascript
浅谈vue引入css,less遇到的坑和解决方法
2018/01/20 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
2018/04/20 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
原生JavaScript实现轮播图
2021/01/10 Javascript
[25:45]2018DOTA2亚洲邀请赛4.5SOLO赛 Sylar vs Paparazi
2018/04/06 DOTA
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
通过C++学习Python
2015/01/20 Python
python计算时间差的方法
2015/05/20 Python
Python 爬虫多线程详解及实例代码
2016/10/08 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
pandas-resample按时间聚合实例
2019/12/27 Python
Python urlopen()和urlretrieve()用法解析
2020/01/07 Python
python 实现数据库中数据添加、查询与更新的示例代码
2020/12/07 Python
好药师网上药店:安全合法的网上药品零售药房
2017/02/15 全球购物
精灵市场:Pixie Market
2019/06/18 全球购物
战略合作协议书范本
2014/04/18 职场文书
环保建议书300字
2014/05/14 职场文书
林肯就职演讲稿
2014/05/19 职场文书
作风转变心得体会
2014/09/02 职场文书
二手房购房协议书范本
2014/10/05 职场文书
毕业典礼主持词
2015/06/29 职场文书
圣诞晚会主持词
2015/07/01 职场文书
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android