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 相关文章推荐
JavaScript 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
js限制文本框只能输入数字方法小结
Jun 16 Javascript
jquery实现两个图片渐变切换效果的方法
Jun 25 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
Sep 11 Javascript
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
使用vue + less 实现简单换肤功能的示例
Feb 21 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
Feb 19 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 Javascript
JS轮播图的实现方法2
Aug 25 Javascript
jQuery实现简单评论区功能
Oct 26 jQuery
微信小程序常用赋值方法小结
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
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
微信公众平台天气预报功能开发
2014/07/06 PHP
PHP+APACHE实现网址伪静态
2015/02/22 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
LAMP环境使用Composer安装Laravel的方法
2017/03/25 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
实例讲解PHP表单处理
2019/02/15 PHP
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
javascript 实现简单的table排序及table操作练习
2012/12/28 Javascript
js substr支持中文截取函数代码(中文是双字节)
2013/04/17 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
2017/03/29 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
Python实现选择排序
2017/06/04 Python
python运行时强制刷新缓冲区的方法
2019/01/14 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
Python Selenium参数配置方法解析
2020/01/19 Python
Python识别html主要文本框过程解析
2020/02/18 Python
python GUI库图形界面开发之PyQt5工具栏控件QToolBar的详细使用方法与实例
2020/02/28 Python
HTML5新特性之type=file文件上传功能
2018/02/02 HTML / CSS
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
Order by的几种用法
2013/06/16 面试题
广州足迹信息技术有限公司Java软件工程师试题
2014/02/15 面试题
给校长的建议书600字
2014/05/15 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
2014年后勤工作总结范文
2014/12/16 职场文书
委托收款证明
2015/06/23 职场文书
导游词之江南周庄
2019/12/06 职场文书