网站开发服务协议,wordpress开发用什么软件,在线制作印章diy印章,金马国旅网站建设分析对表单自由排序#xff0c;决定哪些列显示隐藏#xff0c;能保存设置过的操作 效果图 使用页#xff0c;操作列dataIndex要设置为action#xff0c;forKey必需是唯一的 用的vue2版的antdesign vue写的样式#xff0c;想用其它的ui框架可以自行修改样式
customTable …对表单自由排序决定哪些列显示隐藏能保存设置过的操作 效果图 使用页操作列dataIndex要设置为actionforKey必需是唯一的 用的vue2版的antdesign vue写的样式想用其它的ui框架可以自行修改样式
customTable :tableHeadListtableHead customTableUpdecustomTableUpde forKeydataIndex/customTableimport customTable from ./components/customTable.vue //引入
const tableHead [{title: 序号,dataIndex: index,scopedSlots: { customRender: index },width: 60,align: center},{title: 产品图片,dataIndex: pic,scopedSlots: { customRender: pic },ellipsis: true,align: center},{title: 产品名称,dataIndex: goodsName,ellipsis: true,align: center},{title: 原价,dataIndex: oriPrice,ellipsis: true,width: 80,align: center},{title: 现价,dataIndex: price,ellipsis: true,width: 80,align: center},{title: 产品分类,dataIndex: goodsCategoryName,ellipsis: true,align: center},{title: 状态,dataIndex: publishStatusName,scopedSlots: { customRender: publishStatusName },ellipsis: true,align: center},{title: 操作,dataIndex:action,// fixed: right,scopedSlots: { customRender: action },width: 140,align: center}
];
export default {components: { customTable },data() {return {tableHeadList:[],//表单使用的头部数据}},methods:{//更新表格头部customTableUpde(e){this.tableHeadList e;},}customTable组件
templatediva-popover title v-modelcustomVisible triggerclick placementtopRighta-icon typesetting stylefont-size:20px; clickwaiClick /template slotcontentdiv classcustomBigBoxdiv :idcustomId :refcustomId v-ifheadListheadList.length0 classcustomBoxdiv v-for(item,index) in headList :keyitem[forKey] div classcustomEach v-ifitem.dataIndex ! operationa-checkboxchangecustomCheckChange($event,index) stylewidth: 20px;height: 20px;margin-right:4px;:checkeditem.ischeckedv-modelitem.ischecked /a-checkboxdiv classcustomText{{item.title}}/diva-tooltip placementtop title固定到左侧a-icon typevertical-right classcustomFixed clickaddFixed(left,index) :style{margin-left:4px,color: (item[fixedName]item[fixedName]left)?#1890ff:#777} //a-tooltipa-tooltip placementtop title固定到右侧a-icon typevertical-left classcustomFixed clickaddFixed(right,index) :style{margin-left:10px,color: (item[fixedName]item[fixedName]right)?#1890ff:#777} //a-tooltip/div/div/divdiv classcustomNodata v-else暂无数据/div/divdiv classcustomActiona-button clickreset stylemargin-right: 16px;重置/a-buttona-button typeprimary clicksave保存/a-button/div/template/a-popover/div
/templatescript//拖拽插件,官网https://sortablejs.com/import Sortable from sortablejsexport default{data(){return {customVisible:false,headList:[],//数据el:null,//列表元素}},props:{//组件idcustomId:{type:String,default:customCustomTable},//指定的key字段forKey:{type:String,default:dataIndex},//表头数据tableHeadList:{type:Array,default:[]},//表头数据缓存IDcustomCacheId:{type:String,default:customCustomTable},//左右固定属性名fixedName:{type:String,default:fixed},//操作列对应的名字operation:{type:String,default:action}},mounted(){ let data JSON.parse(JSON.stringify(this.tableHeadList));this.dealList(data);this.$nextTick(() {this.initDrag()this.watchList()})},methods:{//重置reset(){window.localStorage.removeItem(this.customCacheId)let data JSON.parse(JSON.stringify(this.tableHeadList))this.dealList(data)this.$message.success(重置成功)this.customVisible false;},//保存save(){//加个排序this.headList.map((res,index) {res.issort index1;})window.localStorage.setItem(this.customCacheId,JSON.stringify(this.headList))console.log(保存,this.headList)this.$message.success(保存成功)this.customVisible false;},//处理初始化数据dealList(e){const that this;let old window.localStorage.getItem(this.customCacheId);if(old){//有旧数据新旧合并保留旧数据的操作let newlist [];let oldlist JSON.parse(old);console.log(拿取,oldlist)e.map(res {let resul oldlist.filter(ve ve[that.forKey] res[that.forKey]);if(resulresul.length0){let currentobj res;currentobj.issort resul[0].issort;currentobj.ischecked resul[0].ischecked;currentobj[that.fixedName] resul[0][that.fixedName];newlist.push(currentobj)}else{res.issort 9999;res.ischecked true;if(!res[that.fixedName]){res[that.fixedName] ;}newlist.push(res)}})//排序let sortlist newlist.sort((a,b) {let value1 a[issort];let value2 b[issort];return value1 - value2;})this.headList sortlist;}else{e.map(res {res.issort 9999;res.ischecked true;if(!res[that.fixedName]){res[that.fixedName] ;}})this.headList e;}this.outputData()},//重新初始化拖拽waiClick(){if(!this.el){setTimeout(() {this.$nextTick(() {this.initDrag()})},100)}},//初始化拖拽initDrag(){const that this;const el document.getElementById(this.customId);if(el){this.el el;// 创建拖拽实例new Sortable(el, {group:this.customIdgroup,animation: 150,sort: true,onEnd: (e) {//拖拽回调that.dealDragList(e.newIndex,e.oldIndex)}});}},//监听数据变化watchList(){this.unwatch this.$watch(tableHeadList,function(newlist,oldlist){let data JSON.parse(JSON.stringify(newlist));this.dealList(data)},{deep:true //深度监听})},//处理拖拽后的数据dealDragList(newIndex,oldIndex){if(newIndex oldIndex)return;let data JSON.parse(JSON.stringify(this.headList));const currentRow data[oldIndex];data.splice(oldIndex, 1);//删除原位置数据data.splice(newIndex, 0, currentRow); this.headList data;this.outputData()},//选择customCheckChange(e,index){this.headList[index].ischecked e.target.checked;this.outputData()},//固定项addFixed(e,index){if(e left){if(!this.headList[index][this.fixedName] || this.headList[index][this.fixedName] right){this.headList[index][this.fixedName] left;}else{this.headList[index][this.fixedName] ;}}else{if(!this.headList[index][this.fixedName] || this.headList[index][this.fixedName] left){this.headList[index][this.fixedName] right;}else{this.headList[index][this.fixedName] ;}}this.outputData()},//输出数据outputData(e){let data JSON.parse(JSON.stringify(this.headList));//将符合要求的返回let newdata data.filter(res res.ischecked);this.$emit(customTableUpde,newdata)console.log(新返回的数组,data)},},beforeDestroy(){//移除监听if(this.unwatch){this.unwatch()}}}
/scriptstyle scoped
.customBigBox{width:270px;
}
.customBox{width:100%;height: 280px;overflow-y: scroll;background-color: #fff;border-radius: 6px;padding-right: 5px;box-sizing: border-box;
}
.customEach{width: 100%;height: 34px;user-select: none;list-style-type: none;color: #333;padding-left: 10px;font-size: 14px;display: flex;justify-content: space-between;align-items: center;background-color: #fff;
}
.customText{flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}
.customText:hover{color: #1890ff;
}
.customFixed{font-size: 16px;
}
.customFixed:hover{color: #1890ff;
}
.customAction{width: 100%;height: 60px;display: flex;justify-content: flex-end;align-items: center;padding: 5px 14px;box-sizing: border-box;
}
.customNodata{width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;font-size: 14px;color: #999;
}
/style
