大学网站设计,在中国做国外网站,seo科技网,哪些公司需要网页电商设计师1、使用Sortable插件
下载#xff1a; npm install sortablejs --save 引入到当前使用的页面 import Sortable from sortablejs 代码重点#xff1a;可以参考以下代码#xff08;不是拿来就可以用的,需要摘取重要代码的内容#xff09; row-keyid 必须添加且唯…1、使用Sortable插件
下载 npm install sortablejs --save 引入到当前使用的页面 import Sortable from sortablejs 代码重点可以参考以下代码不是拿来就可以用的,需要摘取重要代码的内容 row-keyid 必须添加且唯一
el-table添加一个id
主要是initSort()方法
templatediv classdiff-containerdivel-tablev-loading loading:datatableDataheightcalc(100vh - 180px)stylewidth: 100%reftablerow-keybranchidsortExampleel-table-columnproporderlabel排序width65templatediv classdragimg src/assets/img/drag.png alt/div/template/el-table-columnel-table-columnpropbranchlabel分支名width180/el-table-columnel-table-columnpropremarklabel备注信息template slot-scope{row}div v-ifrow.edit classflex-align-centerel-input v-modelrow.remark placeholder请输入内容/el-inputel-button sizemini stylemargin-left:10pxclickcancle(row)取 消/el-buttonel-buttonsizeminiclickremarkSubmit(row)确 认/el-button/divdiv v-else classflex-align-centerspan{{ row.remark ? row.remark : --}}/spanimg stylemargin-left:12px classcursor-pointersrc/assets/img/edit-icon.png altclickeditRemark(row)/div/template/el-table-columnel-table-columnpropshowlabel显示分支width300template slot-scope{row}!-- div :class[row.show ? show : not-show,flex-align-center]div :class[row.show ? show-title:hidden]{{ row.show ? 显示 : 隐藏 }}/divdiv classcircle cursor-pointerclickupdateDiffShow(row)/div/div --div classel-switch-demo defineSwitchel-switchv-modelrow.showactive-textchangeupdateDiffShow(row)inactive-text/el-switch/div/template/el-table-columnel-table-columnpropdiffNamelabel操作width250template slot-scope{row}el-button classbutton-hoversizemini iconel-icon-deleteclickdeleteDiff(row)删除/el-button/template/el-table-column/el-table/div!-- 后缀名称添加的模态框 --divel-dialogtitle添加可点击文件后缀:visible.syncsuffixVisiblewidth600px:close-on-click-modalfalse:before-closehandleClosedivel-form refform :modelform label-width100pxel-form-item label生效分支el-select v-modelform.region placeholder请选择活动区域el-option label区域一 valueshanghai/el-optionel-option label区域二 valuebeijing/el-option/el-select/el-form-itemel-form-item label文件后缀el-input v-modelform.name placeholder请输入多个文件后缀用英文逗号分隔开 (例如: h,json,xlsx,xlsm,xls)/el-input/el-form-item/el-form/divspan slotfooter classdialog-footerel-button sizeminiclicksuffixVisible false取 消/el-buttonel-button sizeminitypeprimaryclicksuffixVisible false确 定/el-button/span/el-dialog/div!-- 删除提示框 --div classdeleteel-dialogtitle提示:close-on-click-modalfalse:visible.syncdeleteVisiblewidth30%:before-closecloseDeletediv slottitlediv classflex-align-centerimg src/assets/img/warning-red.png altdiv stylemargin-left:4px提示/div/div/divspan确认删除分支 {{ row.branch }} 吗/spanspan slotfooter classdialog-footerel-button clickcloseDelete sizemini取 消/el-buttonel-button typeprimary clickdeleteConfirmsizemini确 定/el-button/span/el-dialog/divdivdelete-tip:deleteVisibletipVisibleclosecloseconfirmconfirm:messagemessage/delete-tip/div/div
/template
scriptimport deleteTip from /components/common/deleteTip.vue;import Sortable from sortablejsexport default {components: {deleteTip,},data() {return {tipVisible:false,message:,confirmMark:,deleteVisible: false,suffixVisible: false,editTime:null,deleteRow: {},row: {},radio: 0,form: {name: ,region: ,date1: ,date2: ,delivery: false,type: [],resource: ,desc: },showRow:[{prop:diffName,label:分支名},],loading: true,tableData: [],typeTimer: null}},watch: {},methods: {onTypeEnd(){let ids []this.tableData.map(item {ids.push(item.branch)})if (this.typeTimer) {window.clearTimeout(this.typeTimer);}this.typeTimer setTimeout(() {let params {project_code: this.$store.state.project,branch: this.$store.state.brand,new_order_list: JSON.stringify(ids)}this.$api.projectSetting.updateBranchOrde(params, res {})}, 2000);},initSort() {this.$nextTick(() {const example1 document.getElementById(sortExample).querySelector(.el-table__body-wrapper tbody);;const _this this;Sortable.create(example1, {draggable: .el-table__row, //指定样式类的元素才允许拖动animation: 100,//过渡动画时间//拖拽结束时事件onEnd: function (evt) {const { newIndex, oldIndex } evt;//实时更换list中的数据const currRow _this.tableData.splice(oldIndex, 1)[0];_this.tableData.splice(newIndex, 0, currRow);_this.onTypeEnd()},});})},cancle(row) {row.edit falsethis.getDiffList()},// 获取分配列表getDiffList(){this.loading truethis.$api.projectSetting.getDiff({project_code: this.$store.state.project,project_id: this.$store.state.version}, res {this.loading falsethis.tableData res.data})},close() {this.tipVisible false},confirm(){if(this.confirmMark diff){// this.editList()this.tipVisible false}else if(this.confirmMark delete){this.tipVisible falselet params {branch: this.row.branch,project_code: this.$store.state.project,project_id: this.$store.state.version}this.$api.projectSetting.deleteDiff(params,res{this.$message.success(删除成功)this.getDiffList()})}},// 编辑功能editList(){let params {id:editid,branch:this.form.branch,mark: this.row.remark,showDiff: !this.row.show}this.$api.projectSetting.editDiff(params, res {this.getDiffList()})},closeDelete() {this.deleteVisible falsethis.$message({type: info,message: 已取消删除}); },deleteConfirm () {this.deleteVisible falsethis.$message({type: success,message: 删除成功!});},handleClose() {this.suffixVisible false},deleteDiff(row) {if(this.tableData.length 1){this.$message.error(请至少保留一个分支不可删除)} else {this.row JSON.parse(JSON.stringify(row))this.tipVisible truethis.message 确认删除分支 ${row.branch} 吗this.confirmMark delete}},editRemark(row) {this.$set(row,edit,true)},addSuffix(){this.suffixVisible true},remarkSubmit(row) {row.edit falsethis.row JSON.parse(JSON.stringify(row))// if(this.editTime){// window.clearTimeout(this.editTime)//}//this.editTime setTimeout(() {// this.editList()//},2000)let params {project_code: this.$store.state.project,project_id: this.$store.state.version,branch:row.branch,update_col:remark,update_data:row.remark,}this.$api.projectSetting.editDiff(params,res{this.getDiffList()this.$message.success(修改成功)})},updateDiffShow(row){// row.show !row.show//this.tipVisible true//this.message 确定要修改显示分支?//this.confirmMark diff//editDifflet params {project_code: this.$store.state.project,project_id: this.$store.state.version,branch:row.branch,update_col:is_show,update_data: row.show ? 1 : 0,}this.$api.projectSetting.editDiff(params,res{this.getDiffList()this.$message.success(修改成功)}).then(res {this.getDiffList()}).catch(res {this.getDiffList()})}},mounted () {this.getDiffList()this.$nextTick(() {this.initSort()})}};/scriptstyle langless scoped.defineSwitch {/deep/.el-switch.is-checked .el-switch__core {border-color: #467FF2 !important;background-color: #467FF2 !important;}/deep/.el-switch__core {margin: 0;position: relative;width: 55px !important;height: 20px;border: 1px solid #D0D0D0 !important;outline: 0;border-radius: 10px;-webkit-box-sizing: border-box;box-sizing: border-box;background: #D0D0D0 !important;-webkit-transition: border-color .3s,background-color .3s;transition: border-color .3s,background-color .3s;vertical-align: middle;}/deep/ .el-switch__core::before {content: 隐藏;position: absolute;top: -1px;right: 5px;color: #fff;}.is-checked /deep/ .el-switch__core::before {content: 显示 ;position: absolute;top: -1px;left: 5px;color: #fff;}}el-switch-demo{}::v-deep .el-table__body .el-table__row:nth-child(n) td {background-color: #fff !important;}.delete /deep/ .el-dialog__body {padding: 13px 20px;color: #606266;font-size: 14px;word-break: break-all;border-top: 1px solid transparent;
}/deep/ .el-message-box__title {padding-left: 0;margin-bottom: 0;font-size: 18px;line-height: 1;color: red;}.button-hover:hover{color:rgba(255, 99, 71, 1);background: #FFFFFF;border: 1px solid rgba(255, 99, 71, 1);}.show{background:rgba(70, 127, 242, 1);width: 50px;height: 20px;line-height: 50px;border-radius: 10px;}.not-show{background:rgba(208, 208, 208, 1);width: 50px;height: 20px;line-height: 50px;border-radius: 10px;}.show-title{color: #FFFFFF;font-size: 12px;padding: 0 2px 0 5px; }.hidden{color: #FFFFFF;font-size: 12px;padding: 0 2px 0 5px; }.circle{background: #FFFFFF;border-radius: 10px;width: 16px;height: 16px;}.diff-container{margin-top: 16px;}.suffix{background: rgba(70, 127, 242, 0.1);padding: 8px 8px;margin-right:10px;color: #467FF2;font-size: 14px;border-radius: 4px;}.el-icon-style{color: rgba(208, 208, 208, 1);font-size: 12px;:hover{color:rgba(255, 99, 71, 1)}}.diff-button{/deep/ .el-button {border: 1px solid #467FF2;color: rgba(70, 127, 242, 1);:hover{background: rgba(70, 127, 242, 0.1);}}}.warning-tip{font-size: 14px;/* 文字/次要文字#898989 */color: #898989;}/style
