vue中sortablejs处理拖拽，过滤input之后需要重新聚焦

#vue中sortablejs处理拖拽，过滤input之后需要重新聚焦| 来源: 网络整理| 查看: 265

1、官方文档：www.sortablejs.com/options.htm…

sortablejs.github.io/Sortable/#s…

github.com/SortableJS/…

参考博客1：www.jb51.net/article/236…

参考博客2：blog.csdn.net/weixin_4388…

2：需求如下

查询条件的代码如下：

字段设置的代码如下：

字段设置输入框不可拖动之后发现输入框没法聚焦了，又给输入框外层套了个div写了个myInpClick事件

引入sortablejs

js代码如下：

整个界面代码：

*查询名称：保存数据筛选新增分组 {{ scope.row.source + "*" + scope.row.label }} 查询条件新增 {{ item.label }} 字段设置是否自动加载是否显示 {{ key }} {{ moduleTag.label }} {{ key }} {{ moduleTag.label }} 关闭 import Vue from "vue"; import Sortable from "sortablejs"; import { getMetaData, getQuery, submit, getViewDetail } from "./api"; import { getCustomerTagDef } from "@/services/customer"; import { getUserContext } from "@/utils/userContext.js"; import { groupData, getLevel } from "@/utils/data_formatter"; import ValueInputs from "./ValueInputs"; let groupColorConfig = ["#F9EBEB", "#FFF4CE", "#EFF6FC", "#DFF6DD"]; export default { components: { "value-inputs": ValueInputs, }, props: ["queryId", "viewName"], data() { return { metaData: [], queryMeta: [], query: null, aliasMapping: {}, tabsData: {}, // 当前选中的 tab activeTabName: "", dialogVisible: false, filedDialogVisible: false, isPaging: true, autoLoad: true, queryName: "", addType: "", editRow: "", checkList: [], metaInitData: [], metaGroupData: [], columnConfig: [], columnCheckAll: false, levelLength: 0, filterGroupData: [], filterData: [], filterWith: [ { value: "and", label: "与" }, { value: "or", label: "或" }, ], filterOperation: [ { value: "=", label: "=", flag: 1 }, { value: "", label: "", flag: 2 }, { value: ">", label: ">", flag: 16 }, { value: "=", flag: 64 }, { value: " item", item); console.log("handleChange", item.source, item.field, tabKey); item.source = this.aliasMapping[tabKey]; if (this.addType === "filterEdit") { this.filterData.map((val, index) => { if (index === this.editIndex) { Object.assign(val, item); $message.success("修改一条数据"); this.dialogVisible = false; } }); } else if (this.addType === "search") { let checkIndex = -1; for (var i = 0; i < this.searchData.length; i++) { if ( `${this.searchData[i].source}.${this.searchData[i].field}` === `${item.source}.${item.field}` ) { checkIndex = i; break; } } if (checked && checkIndex < 0) { $message.success("添加一条数据"); this.searchData.push(item); } else if (!checked && checkIndex >= 0) { $message.warning("移除一条数据"); this.searchData.splice(checkIndex, 1); } } }, // 字段设置拖拽 rowDrop() { // 此时找到的元素是要拖拽元素的父容器 const tbody = document.querySelector( ".drop-table .el-table__body-wrapper tbody" ); const _this = this; Sortable.create(tbody, { // 指定父元素下可被拖拽的子元素 draggable: ".el-table__row", filter:".el-input", onEnd({ newIndex, oldIndex }) { var _data = JSON.parse(JSON.stringify(_this.columnConfig)); const currRow = _data.splice(oldIndex, 1)[0]; _data.splice(newIndex, 0, currRow); _this.columnConfig = _data; console.log(_this.columnConfig) }, }); // 查询条件可拖拽 const tagBody = document.querySelector( ".tagBox" ); Sortable.create(tagBody, { draggable: ".el-tag", onEnd({ newIndex, oldIndex }) { var _tagData = JSON.parse(JSON.stringify(_this.searchData)); const tagIndex = _tagData.splice(oldIndex,1)[0]; _tagData.splice(newIndex,0,tagIndex); _this.searchData = _tagData; }, }); }, myInpClick(index){ let ref = eval('this.$refs.myInp' + index) ref.focus() } }, }; $padding-right: rpx(20); .el-popover.danger { color: $danger !important; padding: rpx(12); background: $danger-bg; .popper__arrow { &:after { border-top-color: $danger-bg; } } } .el-tab-pane { .el-button { margin-top: rpx(12); margin-right: rpx(12); margin-left: 0 !important; } } .el-checkbox.is-bordered { margin-top: rpx(6); margin-left: 0 !important; } .group-column { vertical-align: top; } /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td.drawGroup { vertical-align: top; background: transparent !important; } .group-table { margin: 0 auto; tr { height: 30px; &:hover { td { background: none; } } } td { border: 0; } } .level { width: rpx(20); height: rpx(30); background: #fff; text-align: center; .icon { cursor: pointer; font-size: rpx(16); } } .check-group-title { font-size: rpx(14); color: $subtext; padding: rpx(12) 0 rpx(6) 0; } .dialog-close { position: absolute; right: rpx(20); top: rpx(11); color: #409eff; z-index: 100; font-size: rpx(18); cursor: pointer; } .handleHref { cursor: pointer; color: #409eff; border-bottom: 1px solid $link-color; display: inline-block; line-height: 1.5; padding: 0 rpx(6); } .query-form-panel { /deep/ .meta-dialog { .el-tabs { display: flex; flex-flow: column nowrap; border-left: 0; border-right: 0; } .el-tabs__content { padding: 0; overflow: scroll; } .el-tab-pane { padding: 0 rpx(15); } .el-tabs--border-card { box-shadow: none; } .el-dialog__header { display: none; } .el-dialog__body { padding: 0; height: rpx(600); .el-tabs { height: 100%; } } .checkbox-item { min-width: rpx(100); } } /deep/ .column-dialog { .el-dialog__body { overflow: auto; padding: 0; } } .query-toolbar { height: rpx(50); justify-content: space-between; padding-right: $padding-right; padding: 0 $padding-right; .query-name { font-size: rpx(16); color: $text-color; .el-input { width: auto; } &.active { border: $border; } } } .query-form { flex: 1; display: flex; flex-direction: column; .query-form-title { display: flex; align-items: center; justify-content: space-between; padding: 0 $padding-right; line-height: rpx(36); background: $bg-color; } .query-from-body { flex: 1; padding: 0 $padding-right; .filter-icon { font-size: rpx(16); cursor: pointer; &.el-icon-close { color: $danger; } &.el-icon-plus { margin-right: rpx(6); color: $success; } } .el-popover__reference.el-button { border: none; padding: 0; } .el-tag { position: relative; margin: $padding-y $padding-x 0 0; height: rpx(26); line-height: rpx(24); } /deep/ .danger .el-input__inner { border-color: $danger; } /deep/ .el-input--mini .el-input__inner { height: rpx(24); line-height: rpx(24); } /deep/ .el-input--mini .el-input__icon { line-height: rpx(24); } /deep/ .el-table--mini td, .el-table--mini th { padding: 2px 0; } } } } 复制代码

【本文地址】

公司简介

联系我们