From 441da7ecd798f8b51cdefc7d0f5cde54399a4ca3 Mon Sep 17 00:00:00 2001 From: RuoYi <yzz_ivy@163.com> Date: 星期三, 01 四月 2020 12:21:48 +0800 Subject: [PATCH] 添加handle控制允许拖动的元素 --- ruoyi-ui/src/views/tool/gen/editTable.vue | 31 ++++++++++++++++++++++--------- 1 files changed, 22 insertions(+), 9 deletions(-) diff --git a/ruoyi-ui/src/views/tool/gen/editTable.vue b/ruoyi-ui/src/views/tool/gen/editTable.vue index 3897aa4..5f88c1a 100644 --- a/ruoyi-ui/src/views/tool/gen/editTable.vue +++ b/ruoyi-ui/src/views/tool/gen/editTable.vue @@ -5,20 +5,19 @@ <basic-info-form ref="basicInfo" :info="info" /> </el-tab-pane> <el-tab-pane label="字段信息" name="cloum"> - <el-table :data="cloumns" :max-height="tableHeight"> - <el-table-column label="序号" type="index" min-width="5%" /> + <el-table ref="dragTable" :data="cloumns" row-key="columnId" :max-height="tableHeight"> + <el-table-column label="序号" type="index" min-width="5%" class-name="allowDrag" /> <el-table-column label="字段列名" prop="columnName" min-width="10%" :show-overflow-tooltip="true" /> - <el-table-column - label="字段描述" - prop="columnComment" - min-width="10%" - :show-overflow-tooltip="true" - /> + <el-table-column label="字段描述" min-width="10%"> + <template slot-scope="scope"> + <el-input v-model="scope.row.columnComment"></el-input> + </template> + </el-table-column> <el-table-column label="物理类型" prop="columnType" @@ -30,7 +29,7 @@ <el-select v-model="scope.row.javaType"> <el-option label="Long" value="Long" /> <el-option label="String" value="String" /> - <el-option label="Ingeter" value="Ingeter" /> + <el-option label="Integer" value="Integer" /> <el-option label="Double" value="Double" /> <el-option label="BigDecimal" value="BigDecimal" /> <el-option label="Date" value="Date" /> @@ -127,6 +126,7 @@ import { optionselect as getDictOptionselect } from "@/api/system/dict/type"; import basicInfoForm from "./basicInfoForm"; import genInfoForm from "./genInfoForm"; +import Sortable from 'sortablejs' export default { name: "GenEdit", components: { @@ -199,6 +199,19 @@ this.$store.dispatch("tagsView/delView", this.$route); this.$router.push({ path: "/tool/gen", query: { t: Date.now()}}) } + }, + mounted() { + const el = this.$refs.dragTable.$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0]; + const sortable = Sortable.create(el, { + handle: ".allowDrag", + onEnd: evt => { + const targetRow = this.cloumns.splice(evt.oldIndex, 1)[0]; + this.cloumns.splice(evt.newIndex, 0, targetRow); + for (let index in this.cloumns) { + this.cloumns[index].sort = parseInt(index) + 1; + } + } + }); } }; </script> -- Gitblit v1.9.2