vue的table组件
一个vue-table的组件
说明:
1.基于element-ui开发的vue表格组件。
功能:
1.支持树形数据的展示
2.行拖拽排序
3.单元格拖拽排序
使用方法:
1.下载npm包:
你的VUE项目的根目录底下运行:
npm install ele-table
```
2.引入本npm包并注册为vue的组件:
例如:在需要使用的vue页面中:
```<template>
<!-- 里面写ele-table组件-->
<ele-table :data="tableData" treetable style="width: 100%">
<ele-table-column prop="id" label="姓名">
<template slot-scope="scope">
<div :style="`padding-left:${20*(scope.row._indent-1)}px`">
<span v-if="scope.row.children">
<i v-if="scope.row._expand" >-</i><i v-else>+</i>
</span>
<span>{{scope.row.id}}</span>
</div>
</template>
</ele-table-column>
<ele-table-column prop="id" label="年龄" width="180">
</ele-table-column>
<ele-table-column
prop="label"
label="地址">
</ele-table-column>
</ele-table>
<ele-table
draggablerow //能否行拖拽
:allow-drag="allowdrag" //能否被拖拽
:allow-drop="allowDrop" //能否被放置
:data="tableData"
@node-drag-start="handleDragStart"
@node-drag-enter="handleDragEnter"
@node-drag-leave="handleDragLeave"
@node-drag-over="handleDragOver"
@node-drag-end="handleDragEnd"
style="width: 100%">
<ele-table-column prop="id" label="姓名" width="180">
</ele-table-column>
<ele-table-column
prop="id"
label="年龄"
width="180">
</ele-table-column>
<ele-table-column
prop="label"
label="地址">
</ele-table-column>
</ele-table>
</template>
<script>
import { eleTable, eleTableColumn } from "ele-table";
import 'ele-table/dist/ele-table.css';
//项目引入element-ui 不需要引入样式,但需要class类指定拖拽样式
//<style>
//.el-table--dropNode{
// background-color: #409eff !important;
//}
// .el-tree__drop-indicator {
// position: absolute;
// left: 0;
// right: 0;
// height: 2px !important;
// background-color: #409eff;
// z-index: 10000;
//}
//</style>
export default {
data(){
return{
tableData: [{
id: 1,
label: '一级 1',
_expand:true, //设置默认展开节点
children: [{
id: 4,
label: '二级 1-1',
_expand:true,
children: [{
id: 9,
label: '三级 1-1-1'
}, {
id: 10,
label: '三级 1-1-2'
}]
}]
}, {
id: 2,
label: '一级 2',
children: [{
id: 5,
label: '二级 2-1'
}, {
id: 6,
label: '二级 2-2'
}]
}]
}
},
components: {
eleTable,
eleTableColumn
},
methods: {
handleDragEnd(row, column, cell, event) {
let data = this.tableData[row.draggingcolumn];
if (cell == "after") {
this.tableData.splice(column.dropcolumn + 1, 0, data);
if (row.draggingcolumn > column.dropcolumn) {
this.tableData.splice(row.draggingcolumn + 1, 1);
} else {
this.tableData.splice(row.draggingcolumn, 1);
}
}
if (cell == "before") {
this.tableData.splice(column.dropcolumn, 0, data);
if (row.draggingcolumn > column.dropcolumn) {
this.tableData.splice(row.draggingcolumn + 1, 1);
} else {
this.tableData.splice(row.draggingcolumn, 1);
}
}
if (cell == "inner") {
this.$set(
this.tableData,
row.draggingcolumn,
this.tableData[column.dropcolumn]
);
this.$set(this.tableData, column.dropcolumn, data);
}
},
},
}
}
</script>
<h3>Calendar Attributes</h3>
<table>
<thead><tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>可选值</th>
<th>默认值</th>
</tr></thead>
<tbody>
<tr>
<td>data</td>
<td>显示的数据</td>
<td>array</td>
<td>—</td>
<td>—</td>
</tr>
<tr>
<td>treetable</td>
<td>是否树形数据</td>
<td>boolean</td>
<td>—</td>
<td>false</td>
</tr>
<tr>
<td>_expand</td>
<td>树形数据默认展开节点(不支持递归关联)</td>
<td>boolean</td>
<td>—</td>
<td>false</td>
</tr>
<tr>
<td>draggablerow</td>
<td>是否开启行拖拽</td>
<td>boolean</td>
<td>—</td>
<td>false</td>
</tr>
<tr>
<td>draggable</td>
<td>是否开启单元格拖拽</td>
<td>boolean</td>
<td>—</td>
<td>false</td>
</tr>
<tr>
<td>allow-drag</td>
<td>能否被拖拽</td>
<td>Function(row(行数据), column(行拖拽为index,单元格为所在列), cell(节点), event)</td>
<td>—</td>
<td>要求返回boolean</td>
</tr>
<tr>
<td>allow-drop</td>
<td>能否被放置</td>
<td>Function(row, column, cell, event, type)</td>
<td>—</td>
<td>要求返回boolean</td>
</tr>
</tbody>
</table>
<h3>Calendar Events</h3>
<table>
<thead><tr>
<th>事件名</th>
<th>说明</th>
<th>参数</th>
</tr></thead>
<tbody>
<tr>
<td>node-drag-start</td>
<td>节点开始拖拽时触发的事件</td>
<td>Function(row(行数据), column(行拖拽为index,单元格为所在列), cell(节点), event)</td>
</tr>
<tr>
<td>node-drag-enter</td>
<td>拖拽进入其他节点时触发的事件</td>
<td>Function(row(行数据), column(行拖拽为index,单元格为所在列), cell(节点), event, draggingNode(被拖拽节点)</td>
</tr>
<tr>
<td>node-drag-leave</td>
<td>拖拽离开某个节点时触发的事件</td>
<td>Function(row(行数据), column(行拖拽为index,单元格为所在列), cell(节点), event, draggingNode(被拖拽节点)</td>
</tr>
<tr>
<td>node-drag-over</td>
<td>在拖拽节点时触发的事件</td>
<td>Function(row(行数据), column(行拖拽为index,单元格为所在列), cell(节点), event, draggingNode(被拖拽节点)</td>
</tr>
<tr>
<td>node-drag-end</td>
<td>拖拽结束时触发的事件</td>
<td>Function(dragging(被拖拽节点对象), drop(放置节点对象), dropType(放置位置(before、after、inner)), event)</td>
</tr>
<tr>
<td>node-drop</td>
<td>拖拽完成时触发的事件</td>
<td>Function(dragging(被拖拽节点对象), drop(放置节点对象), dropType(放置位置(before、after、inner)), event)</td>
</tr>
</tbody>
</table>
来源:https://segmentfault.com/a/1190000016123145
vue的table组件的更多相关文章
- vue.js table组件封装
table组件 和 分页组件来自iview,在这里我根据公司业务再次做了一次封装,使用slot进行内容分发,可以随意放置input输入框和button按钮 ,再使用props向子组件传递参数,使用em ...
- VUE -- iview table 组件 中使用 upload组件 上传组件 on render 事件不会触发问题
碰到的问题是: upload 组件在 on中写的监听事件不会被触发 在 props 中来监听:==>
- vue elementui table组件内容换行
解决方案 tableData = [ { "name": "domain111", "metric": [ "平均耗时" ...
- Vue.js说说组件
什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTM ...
- vue.js之组件(上篇)
本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...
- vue学习之组件
组件从注册方式分为全局组件和局部组件. 从功能类型又可以分为偏视图表现的(presentational)和偏逻辑的(动态生成dom),推荐在前者中使用模板,在后者中使用 JSX 或渲染函数动态生成组件 ...
- 在 Element-UI 的 Table 组件上添加列拖拽效果
Element-UI 的 Table组件很强大,但是我们的需求更强大... 简单粗暴的来一发效果图: 一.数据驱动 传统的拖动效果,都是基于通过 mousedown.mousemove.mouseup ...
- Vue.js之组件(component)
从结构上看,组件之于实例,就好比轮子之于汽车.从属性和方法来看,组件有实例的大部分方法,如果Vue实例是孙悟空,组件就好比实例的一个毫毛,变化多端却为Vue实例所用. 目录: 组件的注册 is的作用 ...
- Vue.js之组件系统
vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能.本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统. Vue.js组件系统 每一个新技 ...
随机推荐
- js for in 和 for of 的区别
引自:http://es6.ruanyifeng.com/#docs/iterator for...of循环可以代替数组实例的forEach方法. const arr = ['red', 'green ...
- python-web-习题
1.简单描述 webbrowser.requests.BeautifulSoup 和 selenium 模块之间的不同 webbrowser模块有一个 open() 方法,它启动 web 浏览器,打开 ...
- Ansible 安装使用过程中遇到过的问题
1.[root@ansible ~]# ansible-doc -l [DEPRECATION WARNING]: docker is kept for backwards compatibility ...
- hammer.js使用
手势包括点击(tap),长按(press),滑动(swipe),方向(pan) 使用实例: <!DOCTYPE html> <html> <head> <me ...
- Trie树 模板
普通Trie: struct TRIE{ ],tot,end[MAXN]; TRIE(){tot=;} void insert(char *s){//s为要插入的字符串 int len=strlen( ...
- Elasticsearch 5.6.4 window 安装并简单使用head
1.现在elasticsearch安装包 https://www.elastic.co/downloads/elasticsearch 2.解压elasticsearch-5.6.4.zip 到需要安 ...
- JasperReports报表字段11
报表字段是代表数据源和报表模板之间的数据映射元素.字段可以在报告中的表达式进行组合,以获得所需的输出.报表模板可以包含零个或更多的<field>元素.当声明报表字段,数据源应提供相应的数据 ...
- HDU2896 病毒侵袭 AC自动机模板
各种MLE,这模板感觉有问题,next数组开128也会MLE,实际上可见字符为编号32~126,只用开100就行. #include <iostream> #include <cst ...
- Leetcode459.Repeated Substring Pattern重复的子字符串
给定一个非空的字符串,判断它是否可以由它的一个子串重复多次构成.给定的字符串只含有小写英文字母,并且长度不超过10000. 示例 1: 输入: "abab" 输出: True 解释 ...
- CentOS 6.5安装libvirt启动不了libvirtd进程的错误
今天安装kvm时遇到了一个libvirtd服务启动不了的问题,具体报错信息如下: 自己检查了一阵子,确定其他方面没有问题,在网上搜到了答案,在此整理下来: 再次启动服务,没有任何问题: