vue2.0基于vue-cli+element-ui制作树形treeTable


Posted in Javascript onApril 30, 2019

该组件基于技术栈,主要涉及vue-cli生成的webpack项目脚手架,在此脚手架项目基础上完成的,整合了element-ui开源vue的UI项目

1.vue-cli的安装使用

npm install -g vue-cli

全局安装vue-cli之后,使用该脚手架的相关命令,可快速生成一个比较规范的vue项目结构

vue init <template-name> <project-name>

例子

vue init webpack treeTable

这样一个快速的项目结构生成,如下所示,中间一路回车就可以了,主要是设置了是否支持eslint等等

vue2.0基于vue-cli+element-ui制作树形treeTable

2.整合element-ui

cd treeTable

进入刚刚生成的项目目录中,安装element-ui

npm i element-ui -S

在main.js中,

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

Vue.use(ElementUI)

整合就可以了,具体element-ui更多的使用和操作,可以去官网查看 http://element.eleme.io/#/zh-CN/component/quickstart
我这里主要是利用他的table组件来制作一个树形结构的table。

vue2.0基于vue-cli+element-ui制作树形treeTable

3.树形table组件制作

在src目录的components目录中,

vue2.0基于vue-cli+element-ui制作树形treeTable

其中utils下面提供一些需要用的工具类

vue目录下面是组件的源码

index.js是外包入口

相关代码

dataTranslate.js主要是提供了把数组数据转换成树形结构的数据,并且进行相关属性的添加

/*
* @Author: sunlandong
* @Date:   2017-03-11 12:06:49
* @Last Modified by:   sunlandong
* @Last Modified time: 2017-03-11 16:30:03
*/
 
 
import Vue from 'vue'
function DataTransfer (data) {
  if (!(this instanceof DataTransfer)) {
    return new DataTransfer(data, null, null)
  }
}
 
 
DataTransfer.treeToArray = function (data, parent, level, expandedAll) {
  let tmp = []
  Array.from(data).forEach(function (record) {
    if (record._expanded === undefined) {
      Vue.set(record, '_expanded', expandedAll)
    }
    if (parent) {
      Vue.set(record, '_parent', parent)
    }
    let _level = 0
    if (level !== undefined && level !== null) {
      _level = level + 1
    }
    Vue.set(record, '_level', _level)
    tmp.push(record)
    if (record.children && record.children.length > 0) {
      let children = DataTransfer.treeToArray(record.children, record, _level, expandedAll)
      tmp = tmp.concat(children)
    }
  })
  return tmp
}
 
 
export default DataTransfer

utils/index.js

/*
* @Author: sunlandong
* @Date:   2017-03-11 12:06:55
* @Last Modified by:   sunlandong
* @Last Modified time: 2017-03-11 16:36:56
*/
import MSDataTransfer from './dataTranslate.js'
export default {
	MSDataTransfer
}

TreeGrid.vue是树形table组件的源码

<template>
 <el-table
  :data="data"
  border
  style="width: 100%"
  :row-style="showTr">
  <el-table-column v-for="(column, index) in columns" :key="column.dataIndex"
   :label="column.text">
   <template scope="scope">
    <span v-if="spaceIconShow(index)" v-for="(space, levelIndex) in scope.row._level" class="ms-tree-space"></span>
    <button class="button is-outlined is-primary is-small" v-if="toggleIconShow(index,scope.row)" @click="toggle(scope.$index)">
     <i v-if="!scope.row._expanded" class="el-icon-caret-right" aria-hidden="true"></i>
     <i v-if="scope.row._expanded" class="el-icon-caret-bottom" aria-hidden="true"></i>
    </button>
    <span v-else-if="index===0" class="ms-tree-space"></span>
    {{scope.row[column.dataIndex]}}
   </template>
  </el-table-column>
  <el-table-column label="操作" v-if="treeType === 'normal'" width="260">
   <template scope="scope">
    <button type="button" class="el-button el-button--default el-button--small">
     <router-link
      :to="{ path: requestUrl + 'edit', query: {id: scope.row.Oid} }"
      tag="span">
      编辑
     </router-link>
    </button>
    <el-button
     size="small"
     type="danger"
     @click="handleDelete()">
     删除
    </el-button>
    <button type="button" class="el-button el-button--success el-button--small">
     <router-link :to="{ path: requestUrl, query: {parentId: scope.row.parentOId} }"
            tag="span">
      添加下级树结构
     </router-link>
    </button>
   </template>
  </el-table-column>
 </el-table>
</template>
<script>
 import Utils from '../utils/index.js'
// import Vue from 'vue'
 export default {
  name: 'tree-grid',
  props: {
// 该属性是确认父组件传过来的数据是否已经是树形结构了,如果是,则不需要进行树形格式化
   treeStructure: {
    type: Boolean,
    default: function () {
     return false
    }
   },
// 这是相应的字段展示
   columns: {
    type: Array,
    default: function () {
     return []
    }
   },
// 这是数据源
   dataSource: {
    type: Array,
    default: function () {
     return []
    }
   },
// 这个作用是根据自己需求来的,比如在操作中涉及相关按钮编辑,删除等,需要向服务端发送请求,则可以把url传过来
   requestUrl: {
    type: String,
    default: function () {
     return ''
    }
   },
// 这个是是否展示操作列
   treeType: {
    type: String,
    default: function () {
     return 'normal'
    }
   },
// 是否默认展开所有树
   defaultExpandAll: {
    type: Boolean,
    default: function () {
     return false
    }
   }
  },
  data () {
   return {}
  },
  computed: {
  // 格式化数据源
   data: function () {
    let me = this
    if (me.treeStructure) {
     let data = Utils.MSDataTransfer.treeToArray(me.dataSource, null, null, me.defaultExpandAll)
     console.log(data)
     return data
    }
    return me.dataSource
   }
  },
  methods: {
  // 显示行
   showTr: function (row, index) {
    let show = (row._parent ? (row._parent._expanded && row._parent._show) : true)
    row._show = show
    return show ? '' : 'display:none;'
   },
  // 展开下级
   toggle: function (trIndex) {
    let me = this
    let record = me.data[trIndex]
    record._expanded = !record._expanded
   },
  // 显示层级关系的空格和图标
   spaceIconShow (index) {
    let me = this
    if (me.treeStructure && index === 0) {
     return true
    }
    return false
   },
  // 点击展开和关闭的时候,图标的切换
   toggleIconShow (index, record) {
    let me = this
    if (me.treeStructure && index === 0 && record.children && record.children.length > 0) {
     return true
    }
    return false
   },
   handleDelete () {
    this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'error'
    }).then(() => {
     this.$message({
      type: 'success',
      message: '删除成功!'
     })
    }).catch(() => {
     this.$message({
      type: 'info',
      message: '已取消删除'
     })
    })
   }
  }
 }
</script>
<style scoped>
 .ms-tree-space{position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  width: 18px;
  height: 14px;}
 .ms-tree-space::before{content: ""}
 table td{
  line-height: 26px;
 }
</style>

index.js

import TreeGrid from './vue/TreeGrid.vue'
 module.exports = {
 TreeGrid
}

使用

<template>
 <div class="hello">
  <tree-grid :columns="columns" :tree-structure="true" :data-source="dataSource"></tree-grid>
 </div>
</template>
 
<script>
import {TreeGrid} from './treeTable'
export default {
 name: 'hello',
 data () {
  return {
   columns: [
     {
      text: '姓名',
      dataIndex: 'name'
     },
     {
      text: '年龄',
      dataIndex: 'age'
     },
     {
      text: '性别',
      dataIndex: 'sex'
     }
    ],
   dataSource: [
    {
     id: 1,
     parentId: 0,
     name: '测试1',
     age: 18,
     sex: '男',
     children: [
      {
       id: 2,
       parentId: 1,
       name: '测试2',
       age: 22,
       sex: '男'
      }
     ]
    },
    {
     id: 3,
     parentId: 0,
     name: '测试3',
     age: 23,
     sex: '女',
     children: [
      {
       id: 4,
       parentId: 3,
       name: '测试4',
       age: 22,
       sex: '男'
      },
      {
       id: 5,
       parentId: 3,
       name: '测试5',
       age: 25,
       sex: '男'
      },
      {
       id: 6,
       parentId: 3,
       name: '测试6',
       age: 26,
       sex: '女',
       children: [
        {
         id: 7,
         parentId: 6,
         name: '测试7',
         age: 27,
         sex: '男'
        }
       ]
      }
     ]
    },
    {
     id: 18,
     parentId: 0,
     name: '测试8',
     age: 18,
     sex: '男'
    }
   ]
  }
 },
 components: {
  TreeGrid
 }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

效果图

vue2.0基于vue-cli+element-ui制作树形treeTable

https://github.com/sunlandong/treeTable   github上下载源码

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

Javascript 相关文章推荐
Ucren Virtual Desktop V2.0
Nov 07 Javascript
JavaScript DOM学习第六章 表单实例
Feb 19 Javascript
js几秒以后倒计时跳转示例
Dec 26 Javascript
jquery实现炫酷的叠加层自动切换特效
Feb 01 Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 Javascript
jquery中validate与form插件提交的方式小结
Mar 26 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
May 12 Javascript
js省市县三级联动效果实例
Apr 15 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
Aug 10 Javascript
微信小程序常用赋值方法小结
Apr 30 #Javascript
微信小程序实现同一页面取值的方法分析
Apr 30 #Javascript
一百行JS代码实现一个校验工具
Apr 30 #Javascript
Vue-cli3简单使用(图文步骤)
Apr 30 #Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 #Javascript
VSCode使用之Vue工程配置eslint
Apr 30 #Javascript
微信小程序API—获取定位的详解
Apr 30 #Javascript
You might like
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
JavaScript学习点滴 call、apply的区别
2010/10/22 Javascript
js下将字符串当函数执行的方法
2011/07/13 Javascript
js实现动态改变字体大小代码
2014/01/02 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
2014/11/02 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
vue router 配置路由的方法
2018/07/26 Javascript
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
Python写的一个简单DNS服务器实例
2014/06/04 Python
Python格式化压缩后的JS文件的方法
2015/03/05 Python
从Python程序中访问Java类的简单示例
2015/04/20 Python
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
Python Pandas 箱线图的实现
2019/07/23 Python
使用matlab或python将txt文件转为excel表格
2019/11/01 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
ansible-playbook实现自动部署KVM及安装python3的详细教程
2020/05/11 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
加拿大时尚少女服装品牌:Garage
2016/10/10 全球购物
汉森批发:Hansen Wholesale
2018/05/24 全球购物
美国转售二手商品的电子商务平台:BLINQ
2018/12/13 全球购物
数学教育专业求职信
2014/07/22 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
校园广播稿精选
2014/10/01 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL