el-table固定列,
本文主要介绍了基于埃尔表封装的可拖拽行列、选择列组件的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
效果
需要环境
某视频剪辑软件
elementUI
拖拽插件Sortable.js
需配置属性
示例
一些基本概念
：列="列"
:data=list
:setColumn=true
tableKey=CategoriesList
style=宽度：100%
边界
//这里可以放插槽
模板slot= create _ time slot-scope= scope
{ {范围。专栏。标签范围。项目。道具} }
/模板
模板slot=action slot-scope=scope
El-button type= primary @ click= handleEdit(范围。row) size= small
编辑
/el-button
El-button @ click= handle delete(范围。row) type= danger size= small
删除
/el-button
/模板
/HTable
从" @/组件/HTable "导入HTable
导出默认值{
组件：{ HTable }，
data() {
返回{
列表：[],
列：[
{
标签:" ID "，//描述
属性：" _id "，//列的唯一值。必须要有
选中：true //是否展示该列
.//一些埃尔-表格-列的属性都可以写在这里
},
{
标签: 分类名称，
道具："名称",
选中：真
},
{
标签: 上级分类，
属性： parent.name ，
选中：真
},
{
标签: 状态，
属性："状态",
宽度： 100 ,
选中：真
},
{
标签: 创建时间，
属性：创建时间，
slotHeaderName: create_time ，//自定义表头
选中：真
},
{
标签: 操作，
道具："动作",
已修复："右侧",
最小宽度: 100 ,
slotName: action ，//自定义单元格插槽
已检查：正确，
禁用：真
}
]
};
}
};
有用到的话给我点个赞！附组件代码
模板
div class=HTable
设置框 v-if=设置列
埃尔-波普沃
位置="底端"
触发器=点击
波普-class=设置波普
埃尔-复选框-组
v-model=selectCol
@ change= handleChangeSelectColumn
埃尔-复选框
v-for=列中的项目
:key=item.prop
:label=item.prop
:disabled=item.disabled
style= display:block；行高：2;右边距：0;
{{ item.label }}/el-checkbox
/el-checkbox-group
I class= icon El-icon-setting slot= reference /I
/el-popover
/div
埃尔表
v-bind=$attrs
:data=tableData
v-on=$listeners
:key=JSON.stringify(checkedCol)
埃尔-表格-列
v-for=(item，index) in checkedCol
:key=item.prop
v-bind=item
:index=index
:column-key=item.prop
模板v-if= item。插槽标头名称“v-slot:header=“scope”
插槽：name= item。slot header name v-bind= scope :item= item /slot
/模板
模板v-if= item。插槽名称“v-slot:default=“scope”
插槽：name= item。slot name v-bind= scope /slot
/模板
/El-表格-列
/el-table
/div
/模板
脚本
从"排序表"导入可排序的；
导出默认值{
名称： HTable ，
道具：{
表键：字符串，
列：{
类型：数组，
默认(){
return[]；
}
},
数据：{
类型：数组，
默认(){
return[]；
}
},
setColumn: {
类型：布尔型，
默认值：错误
}
},
观察：{
列：{
处理程序（新值){
设局部val=this。getstoragecol()；
设hotVal=[]；
if (localVal) {
hotVal=this.dataDiff(newVal，local val)；
}否则{
hotVal=[.新val]；
}
this.col=hotVal.map(
（项目，索引)=1
(item={.item，index，checked: item.checked false })
);
这个。选中的列=this。查了一下colfun(这个。col)；
这个。选择col=this。已检查列映射(项目=(项目=项目。prop))；
},
即时：正确
},
数据：{
处理程序（新值){
this.tableData=[.新val]；
},
即时：正确
},
列：{
处理程序（新值){
这个。setstoragecol(新val)；
},
深：真的，
即时：正确
}
},
data() {
返回{
表数据：[],
列：[],
checkedCol: []，
选择列：[]
};
},
已安装(){
文档。身体。ondrop=函数(事件){
事件。防止默认()；
事件。停止传播()；
};
这个. nextTick(()={
这个。row drop()；
这个。列drop()；
});
},
方法：{
drap() {
这个. nextTick(()={
这个。row drop()；
这个。列drop()；
});
},
handleChangeSelectColumn() {
this.col.forEach(item={
如果(这个。选择列包含(项目。道具)){
item.checked=true
}否则{
item.checked=false
}
});
这个。选中的列=this。查了一下colfun(这个。col)；
这个。drap()；
},
rowDrop() {
const tbody=document。查询选择器(.El-table _ _ body-wrapper tbody )；
Sortable.create(tbody，{
onEnd: ({ newIndex，oldIndex })={
[this.tableData[newIndex]，这个。表数据[ol索引]]=[
this.tableData[oldIndex]，
this.tableData[newIndex]
];
这个。drap()；
这个发出( dropRow ，{
drap row:这个。表数据[旧索引]，
目标行：这个。表数据[新索引]、
drapRowIndex: oldIndex，
targetRowIndex: newIndex，
数据：this.tableData
});
}
});
},
columnDrop() {
const wrap pertr=文档。查询选择器(.El-table _ _ header-wrapper tr’)；
Sortable.create(wrapperTr，{
动画：180,
延迟：0,
onEnd: ({ newIndex，oldIndex })={
const ol ditem=this。已检查col[ol索引]；
const new item=this。已检查列[新索引]；
[this . col]新项目索引.index，this.col[oldItem.index].index]=[
oldItem.index，
新项目。索引
];
this.col.sort((a，b)={
返回a .指数-b .指数；
});
这个。选中的列=this。查了一下colfun(这个。col)；
这个。tabledata=this。表格数据。切片(0，这个。表格数据。长度)；
这个。drap()；
这个. emit(dropCol ，{
colItem: oldItem，
newIndex: newIndex，
ol指数：ol指数，
列：this.checkedCol
});
}
});
},
checkedColFun(arr) {
返回由…改编过滤器(item=item。勾选)；
},
setStorageCol(数据){
如果(这个。表键数据。长度0){
本地存储。setitem( HTable- this。tablekey，JSON。stringify(数据))；
}
},
getStorageCol() {
让数据JSON=本地存储。getitem( HTable- this。tablekey)；
返回datajson？JSON。parse(data JSON):" "；
},
dataDiff(newVal，localVal) {
设nl=newVal .长度
设ll=本地val。长度；
如果(nl！=ll) {
返回纽瓦尔
}否则{
设np=newVal.map(item=item.prop).sort()；
设lp=localVal.map(item=item.prop).sort()；
if (np.join()！=lp.join()) {
返回纽瓦尔
}否则{
设nnl=[]；
对于(设I=0；我在当地瓦尔。长度；i ) {
const item _ l=局部val[I]；
对于(设j=0；j newVal.lengthj ) {
const item _ n=new val[j]；
if (item_l.prop===item_n.prop) {
nnl.push({
.item_n，
索引：item_l.index
});
}
}
}
返回乙
}
}
}
}
};
/脚本
style lang=less 范围。HTable {
位置：相对；设置框{
宽度：36px
高度：36px
边框-半径：2px
边框：1px solid # ebeef5
底部边框：0;
左边距：自动；
位置：相对；图标{
位置：绝对；
top:0；
左：0;
z指数：1;
宽度：36px
高度：36px
文本对齐：居中；
字体大小：20px
行高：36px
颜色：# 909399;
光标：指针；
}
}
}
/风格
style lang=less 。设置按钮{
最小宽度：100px！重要；
}
/风格
到此这篇关于基于埃尔表封装的可拖拽行列、选择列组件的实现的文章就介绍到这了，更多相关埃尔表可拖拽行列内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。