elementui table 拖拽,elementui表格宽度拖拽
这篇文章主要介绍了某视频剪辑软件元素排序表实现表格列的拖拽案例详解，本篇文章通过简要的案例，讲解了该项技术的了解与使用，以下就是详细内容，需要的朋友可以参考下
1.css: dragTable.css
@ charset UTF-8 ；w-表{
身高：100%;
宽度：100%;
浮动：左；
}
/* 拖动过程中，鼠标显示样式*/。w-表_移动100 . El表th .广告电池{
光标：移动！重要；
}。w-表_移动100 . El-表_ _固定{
光标：不允许；
}。w表公元2000年电池{
显示：内嵌-伸缩；
伸缩方向：列；
对齐-项目：居中；
宽度：自动；
最大高度：23px
垂直对齐：居中；
溢出：初始；
位置：相对；
}
2.封装组件：dragTable.vue
模板
div class= w-table :class= { w-table _ moving :dragstate。绘图}
el-table :data=data
:ref=option.ref
:class=option.class
:stripe=option.stripe
:border=option.border
:height=option.height
:max-height=option.maxHeight
突出显示-当前行
:style=“{ width:parse int(option。width) px } :cell-class-name= cell class name
:标题单元类名=标题单元类名
@ sort-change=选项。排序更改
插槽名称=固定/插槽
表格标题中的模板v-for=(col，index
El-table-column:label= col . label :key= index :prop= col . prop :width= col . width v-if= col . use template==true
模板槽-范围="范围"
span v-html=col . usetemplateres(scope。row)/span
/模板
/El-表格-列
埃尔-表格-列五-其他
:key=index
:prop=col.prop
:label=col.label
:width=col.width
:min-width=col.minWidth
:type=col.type
:sortable=col.sortable
:header-align=col.headerAlign
:align=col.align
:column-key=index.toString()
:render-header=renderHeader
显示溢出工具提示
:formatter=col.formatter
/El-表格-列
埃尔表列：label= v . name :key= k :prop= v . prop :width= v . width v-else/El表列
/模板
！- el-table-column v-for=(col，index)in table header :key= index
:prop=col.prop
:label=col.label
:width=col.width
:min-width=col.minWidth
:type=col.type
:sortable=col.sortable
:header-align=col.headerAlign
:align=col.align
:column-key=index.toString()
:render-header=renderHeader
显示溢出工具提示
:formatter=col.formatter
/El-表格-列-
/el-table
/div
/模板
脚本
从"排序表"导入可排序的
导出默认值{
名称： ,
data () {
返回{
tableHeader: this.header，
dragState: {
start: -9，//起始元素的指数
end: -9，//移动鼠标时所覆盖的元素指数
拖动：false，//是否正在拖动
方向：未定义//拖动方向
}
}
},
道具：{
数据：{
默认值：函数(){
return []
},
类型：数组
},
标题：{
默认值：函数(){
return []
},
类型：数组
},
选项：{
默认值：函数(){
返回{}
},
类型：对象
}
},
已安装(){
},
观察：{
标题(瓦尔，老瓦尔){
this.tableHeader=val
}
},
方法：{
renderHeader (createElement，{column}) {
返回创建元素(
分区,{
class: [thead-cell]，
开：{
mousedown:($ event)={ this。处理mousedown($ event，column) }，
mousemove:($ event)={ this。处理mousemove($ event，column) }
}
}, [
//添加a用于显示表头标签
createElement(span ，column.label)，
//添加一个空标签用于显示拖动动画
createElement(span ，{
类":[虚拟]
})
])
},
//按下鼠标开始拖动
handleMouseDown(例如，列){
this.dragState.dragging=true
这个。德拉格斯特。start=parse int(column。列键)
//给拖动时的虚拟容器添加宽高
让表格=文档。getelementsbyclassname( w-table )[0]
让虚拟=文档。getelementsbyclassname(“虚拟”)
对于（虚拟的让项){
项目。风格。高度=桌子。客户端高度-1 像素
//项目。风格。宽度=项目。父元素。父元素。客户端宽度像素
项目。风格。宽度=项目。父元素。客户端宽度像素
}
文档。addevent侦听器( mouseup ，this。处理mouseup)；
},
//鼠标放开结束拖动
handleMouseUp () {
this.dragColumn(this.dragState)
//初始化拖动状态
this.dragState={
开始：-9,
end: -9，
拖：假，
方向：未定义
}
文档。removeeventlistener( mouseup ，this。处理mouseup)；
},
//拖动中
handleMouseMove (e，column) {
如果(这个。德拉格斯特。图纸){
让index=parse int(column。列键)//记录起始列
if (index - this.dragState.start！==0) {
这个。德拉格斯特。方向=指数-这个。德拉格斯特。开始0？左:右//判断拖动方向
这个。德拉格斯特。end=parse int(column。列键)
}否则{
this.dragState.direction=未定义
}
}否则{
返回错误的
}
},
//拖动易位
拖动列({开始，结束，方向}) {
让临时数据=[]
let left=direction===left
让min=左？结束：开始- 1
让最大=左？开始1:结束
对于(设I=0；我这个。表格标题。长度；i ) {
if (i===end) {
临时数据。推(这个。表格标题[开始])
} else if (i min i max) {
临时数据。推(这个。表头[左？我- 1:我1 ])
}否则{
临时数据。推(这个。表格标题[I])
}
}
this.tableHeader=tempData
},
headerCellClassName ({column，columnIndex}) {
设active=列索引-1===this。德拉格斯特。结束？` darg _ active _ $ { this。德拉格斯特。方向} `:
设start=列索引-1===this。德拉格斯特。开始？` darg_start `:
返回" ${ active } ${ start } "
},
cellClassName ({column，columnIndex}) {
return(列索引-1===this。德拉格斯特。开始？` darg_start `: )
},
},
}
/脚本
风格
@ import ~ @/assets/CSS/drag table。CSS ；
/风格
3.调用封装组件
模板
差异
wTable:Data= WarnResTable _ Data _ SS :header= tableHeaderSS :option= tableOptionSS
埃尔-表格-列
type=index
slot=固定
固定的；不变的
prop=
标签=序号
align=居中
宽度=60
/El-表格-列
埃尔-表格-列
标签=操作
slot=固定
固定的；不变的
prop=
宽度=95
align=居中
模板槽-范围="范围"
埃尔按钮
size=mini
@click=lookDetails(范围 index，scope.row)查看
/el-button
/模板
/El-表格-列
/wTable
/div
/模板
脚本
从导入wTable././components/dragTable/dragTable
导出默认值{
名称："表",
data () {
返回{
表格选项：{
边框：真的，
条纹：真的，
ref:WarnResSSTable ，
类别：“经前综合症-表格",
最大高度："100%",
高度："100%",
排序变化：这个。变化表排序
},
tableHeaderSS: [
{
标签: 地市名称，
属性：“dsmc”，
可排序：对，
对齐："居中",
宽度： 200 ,
},
{
标签: 运维单位，
道具： ywdw ，
对齐："居中",
宽度： 200 ,
},
{
标签: 变电站，
道具： bdzmc ，
对齐："居中",
宽度： 170 ,
},
{
标签: 设备名称，
道具： sbmc ，
可排序：对，
对齐："居中",
宽度： 150 ,
},
{
标签: 预警参数，
道具： yjcs ，
对齐："居中",
宽度： 150 ,
},
{
标签: 预警类型，
道具： yjlx ，
对齐："居中",
宽度： 140 ,
},
{
标签: 首次预警时间，
道具： scyjsj ，
可排序：对，
对齐："居中",
宽度： 160 ,
formatter:this.formatTime
},
{
标签: 更新数据时间，
道具： dqyjsj ，
可排序：对，
对齐："居中",
宽度： 160 ,
formatter:this.formatTime
},
{
标签: 预警描述，
道具： yjgz ，
对齐："居中",
宽度： 170 ,
},
{
标签: 设备类型，
道具： sblx ，
可排序：对，
对齐："居中",
宽度： 140 ,
},
{
标签: 电压等级，
道具：“dydjid”，
可排序：对，
对齐："居中",
宽度： 120 ,
格式化程序：这个。格式电压电平
}
],
WarnResTable_Data_SS:[
{dsmc:dsmc1 ，sbmc:sbmc1 ，dydjid:hhhhh1}，
{dsmc:dsmc2 ，sbmc:sbmc2 ，dydjid:hhhhh2}，
{dsmc:dsmc3 ，sbmc:sbmc3 ，dydjid:hhhhh3}
],
}
},
方法：{
handleNameSort () {
console.log(handleNameSort )
},
格式电压等级：函数（行，列){
设val=row[column。属性]；
if (val==undefined) {
返回"";
}
console.log(val )
返回 5555
},
更改表排序（列){
console.log( sortHandle列，列)
},
格式化时间：函数（行，列){
let date=row[column。属性]；
if (date==undefined) {
返回"";
}
返回日期？时刻（新日期（日期))。格式( YYYY-MM-DD HH:MM:SS ):" "；
},
格式电压等级：函数（行，列){
设val=row[column。属性]；
if (val==undefined) {
返回"";
}
返回值千伏
},
},
组件：{
wTable
}
}
/脚本
到此这篇关于某视频剪辑软件元素排序表实现表格列的拖拽案例详解的文章就介绍到这了，更多相关某视频剪辑软件元素排序表实现表格列的拖拽内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。