element-ui 实现table整列的拖动
1. 先动态渲染表头，给每一个表头添加一个class=virtual 的画虚线的类名，同时给每个表头加上鼠标点击、拖动、抬起事件：mousedown->mousemove->mouseup.
2. 点击时确定点击的哪个，拖动的时候确定拖动的方向，抬起的时候确定放在的位置。
3. 改变数据实现拖动完成效果。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自定义表头样式和整列的拖动</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.3.7/lib/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://unpkg.com/element-ui@2.3.7/lib/index.js"></script>
<style>
*{
padding:;
margin:;
}
body {
padding:50px;
overflow-x: hidden;
}
.thead-cell{
position: relative;
}
.drag_table th {
cursor: move;
}
.virtual {
position: fixed;
display: block;
margin-top: -35px;
margin-left: -11px;
}
.drag_active_left .virtual {
border-left: 1px dotted #;
z-index: ;
}
.drag_active_right .virtual {
border-right: 1px dotted #;
z-index: ;
}
/*
给选中要拖动的列添加背景色，如果在完整项目内部的组件，所以这个组件的style，不能加scoped,否则添加不上样式
如果使用了sass或者less,可以加scoped 然后在用特殊手法处理样式
*/
.dragging_column {
background-color: #f3f3f3 !important;
} </style>
</head> <body>
<div id="app">
<p style="text-align:center;font-size:20px;margin-bottom:50px;">自定义表头样式和整列的拖动</p>
<div @mouseleave="moveTableOutside">
<el-table class="drag_table" :data="tableData" border stripe :cell-class-name="cellClassName" :header-cell-class-name="headerCellClassName">
<el-table-column v-for="(col, index) in tableHeader" :key="index" :prop="col.prop" :label="col.label" :column-key="index.toString()" :render-header="renderHeader">
</el-table-column>
</el-table>
</div>
</div>
</body>
<script>
var Main = {
data() {
return {
tableData: [{
name: '王小虎',
date: '2016-05-02',
address: '上海市普陀区金沙江路 1518 弄'
}, {
name: '王老五',
date: '2016-05-04',
address: '上海市普陀区金沙江路 1517 弄'
}, {
name: '王大锤',
date: '2016-05-01',
address: '上海市普陀区金沙江路 1519 弄'
}, {
name: '王小龙',
date: '2016-05-03',
address: '上海市普陀区金沙江路 1516 弄'
}],
tableHeader: [{
prop: 'name',
label: '姓名'
}, {
prop: 'date',
label: '时间'
}, {
prop: 'address',
label: '地址'
}],
dragState: {
startIndex: -, // 拖动起始元素的index
endIndex: -, // 拖动结束元素的index
afterMoveIndex: -, // 拖动后元素的index
dragging: false, // 是否正在拖动
direction: null, // 拖动方向
moveTableOutsideBack: false // 拖出到table外之后又拖回来
}
}
},
methods: {
// drag_table在渲染表头时调用
renderHeader(h, {
column,
$index
}) {
// 这里可以根据$index的值来对自身需求进行修改，
return h('span', {
'class': ['thead-cell'],
style: {
'display': 'block',
'width': '100%',
'cursor': 'move',
},
on: {
mousedown: ($event) => {
this.handleMouseDown($event, column)
},
mouseup: ($event) => {
this.handleMouseUp($event, column)
},
mousemove: ($event) => {
this.handleMouseMove($event, column)
}
}
}, [
h('span', [
// 给每个表头添加icon 可以不需要
h('span', {
class: $index === ? 'el-icon-star-off' : $index === ? 'el-icon-time' : $index === ? 'el-icon-location' : '',
}),
h('span', column.label)
]),
// 给每个表头添加一个class=virtual 是画虚线的类名。
h('span', {
'class': ['virtual']
})
])
},
// 按下鼠标开始拖动 设置列的背景色
handleMouseDown(e, column) {
// 判断是鼠标左键
if (e.button === ) {
this.dragState.dragging = true
this.dragState.startIndex = parseInt(column.columnKey)
console.log(`开始移动的位置 ${this.dragState.startIndex}`)
// 给当前要拖动列的th设置class
document.querySelectorAll('.drag_table table thead tr th')[this.dragState.startIndex].className += ' ' + 'dragging_column';
// 给拖动时的虚拟容器添加宽高
let table = document.getElementsByClassName('drag_table')[]
let virtual = document.getElementsByClassName('virtual')
// 设置新插入的span.virtual的标签 每一列的宽度、高度
for (let item of virtual) {
item.style.height = table.clientHeight - + 'px'
item.style.width = item.parentElement.parentElement.clientWidth + 'px'
}
this.dragState.moveTableOutsideBack = false
}
},
// 拖动中
handleMouseMove(e, column) {
// 判断是鼠标左键
if (e.button === ) {
if (this.dragState.dragging) {
let currentIndex = parseInt(column.columnKey) // 拖动的当前列index
console.log(`移动到了${currentIndex}`)
if (currentIndex !== this.dragState.startIndex) {
this.dragState.direction = currentIndex - this.dragState.startIndex < ? 'left' : 'right' // 判断拖动方向
this.dragState.afterMoveIndex = currentIndex
} else {
this.dragState.direction = null
}
} else {
return false
}
}
},
// 鼠标放开结束拖动
handleMouseUp(e, column) {
// 判断是鼠标左键
if (e.button === ) {
// 拖出当前table外之后又拖回来，不再进行易位操作（拖出去时已处理）
if (this.dragState.moveTableOutsideBack) {
return false
} else {
this.dragState.endIndex = parseInt(column.columnKey) // 记录结束列index
console.log(`结束移动的位置 ${this.dragState.endIndex}`)
if (this.dragState.startIndex !== this.dragState.endIndex) {
this.dragColumn(this.dragState)
}
this.finishDragInit()
}
}
},
// 拖动到当前table之外的处理
moveTableOutside() {
if (this.dragState.dragging) {
this.dragState.endIndex = this.dragState.startIndex
console.log(`已移动到table外，结束移动的位置 ${this.dragState.endIndex}`)
if (this.dragState.startIndex !== this.dragState.endIndex) {
this.dragColumn(this.dragState)
}
this.finishDragInit()
this.dragState.moveTableOutsideBack = true
}
},
// 拖动易位
dragColumn({
startIndex,
endIndex,
direction
}) {
console.log(`从${startIndex}移动到了${endIndex}`)
// 排除掉鼠标点击table外面，然后拖入进table报错
if (startIndex < ) {
return;
}
// 判断是向左移动还是向右移动
// 把移动的列插在某个列前面或者后面，然后在删除移动的列
if (direction === 'left') {
this.tableHeader.splice(endIndex, , this.tableHeader[startIndex])
this.tableHeader.splice(startIndex + , )
} else {
this.tableHeader.splice(endIndex + , , this.tableHeader[startIndex])
this.tableHeader.splice(startIndex, )
}
},
// 拖动完成后的初始化
finishDragInit() {
// 给当前要拖动列的th取消class
for (var item of document.querySelectorAll('.drag_table table thead tr th')) {
item.className = String(item.className).split("dragging_column").join("");
}
// 再次初始化拖动状态
this.dragState = {
startIndex: -,
endIndex: -,
afterMoveIndex: -,
dragging: false,
direction: null,
moveTableOutsideBack: false
}
},
// 动态给表头单元格添加 class，实现拖动中的虚线效果
/*
这个监听在table渲染的时候会执行一遍。
然后还会有两个条件会触发执行：
1. 绑定的数据发生变化的时候(即为表格内容变化就触发)。header变化触发header-cell-class-name，表格数据变化触发cell-class-name.
2. return返回值 如果绑定了data,如果此data变化也会触发执行。相当于对这个data进行了监听随之触发这个方法。
*/
headerCellClassName({
column,
columnIndex
}) {
console.log()
return columnIndex === this.dragState.afterMoveIndex ? `drag_active_${this.dragState.direction}` : ''
},
// 动态给表头单元格th添加class，实现拖动中的背景
cellClassName({
column,
columnIndex
}) {
console.log()
return (columnIndex === this.dragState.startIndex ? `dragging_column` : '')
},
},
mounted() {
var that = this;
setTimeout(function() {
// that.tableHeader[0].label = 'wwwwww';
// that.tableData[0].name = 'wwwwww';
// console.log()
// console.log(document.querySelectorAll('.drag_table .el-table_2_column_4')[0])
// document.querySelectorAll('.drag_table table thead tr th')[0].className += ' ' + 'dragging_column';
// that.dragState.startIndex = '1'
}, )
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script> </html>
element-ui 实现table整列的拖动的更多相关文章
- 怎么样使element ui 的table某列变色
第一步.在el-table里面加上:row-style="rowClass" <el-table :data="targetCarList" border ...
- （Element UI 组件 Table）去除单元格底部的横线
Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线. 这个底部横线其实是一个 b ...
- Element UI的Table用法
Table 表格 用于展示多条结构类似的数据,可对数据进行排序.筛选.对比或其他自定义操作. ¶基础表格 基 2016-05-02 王小虎 上海市普陀区金沙江路 1518 弄 2016-05-04 王 ...
- Element Ui中table实现表格编辑效果
主要以css实现 .tb-edit .el-input, .tb-edit .el-input-number, .tb-edit .el-select { display: none; width: ...
- element ui 合计/table show-summary
在el-table 上面加上show-summary就可以对table的数据进行合计 但是上次出现了合计栏有的为空,有的合计不对的情况,如果出现的是空,那么说明你渲染的数据有undefine(即后台返 ...
- element ui里面table分页,页数从0开始的怎么做？
需求: 后台请求的接口是从0页开始的,但是pagination是从1开始的,就是在点击pagination的第1页是后台转0 1首先在data里面定义为1,其他地方也是定义1 return { for ...
- element ui的table的头部自定义
<el-table-column label="级别" min-width="120" prop="clueLevel" align= ...
- 普通element ui table组件的使用
1.使用基础的element ui 的table的基础使用 首先,使用前要先引用element库到项目中,可以直接引入element的js和css或者在vue项目下按需加载不同的组件 废话不多说,直接 ...
- Element UI表格组件技巧：如何简洁实现跨页勾选、跨页统计功能
业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...
随机推荐
- 互联网的大数据神话——NoSQL
本文摘抄于:<纵横大数据--云计算数据基础设施> 何小朝著 Chapter5. NewSQL--关系数据库联邦/联合 5.4.2 互联网的神话 对强一致性的要求放松,是因为 互联网的分布 ...
- cms初步构想
一.cms系统的初步构想 公司正准备使用yii框架重新弄个类cms的系统: 初步的功能: 栏目文章的管理 SEO的优化功能 推荐位管理 一些思路和规则: 数据库表名的定义:通过"大模块名称+ ...
- Robot Framework（三）创建测试用例
2.2.1测试用例语法 基本语法 测试用例由关键字在测试用例表中构建.关键字可以从测试库或资源文件导入,也可以在测试用例文件本身的关键字表中创建. 测试用例表中的第一列包含测试用例名称.测试用例从包含 ...
- 微信App支付：微信支付的appid，appsecret，商户号mch_id，微信交易支付密钥(mch_key)在哪里查看
1-1) 查看微信支付 appid 的方法 微信支付使用的 appid, 是微信服务号的 appid, 需要你登录微信服务号后台, 在 开发-基本配置/开发者ID(AppID) 中查看微信支付 app ...
- Oracle下rman备份和还原到数据库任意一个时间点
Rman备份为物理备份,启用rman备份必须开启数据库归档,开启归档后相当于给数据库加了一层双保险.Rman备份主要备份数据库的数据文件,控制文件,归档日志. RMAN 备份 一. 检查数据库是否启用 ...
- vc++创建窗体
//创建窗口,一般分为四步 /*1 WinMain函数的定义 2 创建一个窗口 3 编写消息循环 4 编写窗口过程函数*/ #include <windows.h> //包含windows ...
- 4.1、Ansible模块
ansible-doc -l 列出所有模块 ansible-doc 模块名 查看模块的help说明 ansible-doc -s module_name:获取指定模块的使用信息 ***文 ...
- Linux初级命令总结
第1节 查看当前系统版本及内核 cat /etc/redhat-release (查看系统版本) CentOS Linux release 7.4.1708 (Core) uname -r (查看系统 ...
- 03.IO读写-2.用with open进行文件读写
读写文件是最常见的IO操作.Python内置了读写文件的函数,用法和C是兼容的. 读写文件前,我们先必须了解一下,在磁盘上读写文件的功能都是由操作系统提供的,现代操作系统不允许普通的程序直接操作磁盘, ...
- redis 五大数据类型
一.String set : 添加数据 get : 获得指定 key 的 value del : 删除指定 key append : 往字符串后面添加 append k1 12345 ...