zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UP scFormTable 1.1

This commit is contained in:
sc 2023-02-09 12:42:54 +08:00
parent a28750dc52
commit 74581d8d33
1 changed files with 25 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/scFormTable/index.vue
View File

@ -1,6 +1,15 @@
<!--
* @Descripttion: 表单表格
* @version: 1.1
* @Author: sakuya
* @Date: 2023年2月9日12:32:26
* @LastEditors: sakuya
* @LastEditTime: 2023年2月9日12:32:26
-->
<template> <template>
<div class="sc-form-table"> <div class="sc-form-table" ref="scFormTable">
<el-table :data="data" ref="table" :key="toggleIndex" border stripe> <el-table :data="data" ref="table" border stripe>
<el-table-column type="index" width="50" fixed="left"> <el-table-column type="index" width="50" fixed="left">
<template #header> <template #header>
<el-button type="primary" icon="el-icon-plus" size="small" circle @click="rowAdd"></el-button> <el-button type="primary" icon="el-icon-plus" size="small" circle @click="rowAdd"></el-button>
@ -12,9 +21,9 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="" width="58" v-if="dragSort"> <el-table-column label="" width="50" v-if="dragSort">
<template #default> <template #default>
<el-tag class="move" style="cursor: move;"><el-icon-d-caret style="width: 1em; height: 1em;"/></el-tag> <div class="move" style="cursor: move;"><el-icon-d-caret style="width: 1em; height: 1em;"/></div>
</template> </template>
</el-table-column> </el-table-column>
<slot></slot> <slot></slot>
@ -37,8 +46,7 @@
}, },
data(){ data(){
return { return {
data: [], data: []
toggleIndex: 0
} }
}, },
mounted(){ mounted(){
@ -67,12 +75,17 @@
animation: 300, animation: 300,
ghostClass: "ghost", ghostClass: "ghost",
onEnd({ newIndex, oldIndex }) { onEnd({ newIndex, oldIndex }) {
const tableData = _this.data _this.data.splice(newIndex, 0, _this.data.splice(oldIndex, 1)[0])
const currRow = tableData.splice(oldIndex, 1)[0] const newArray = _this.data.slice(0)
tableData.splice(newIndex, 0, currRow) const tmpHeight = _this.$refs.scFormTable.offsetHeight
_this.toggleIndex += 1 _this.$refs.scFormTable.style.setProperty('height', tmpHeight + 'px')
_this.data = []
_this.$nextTick(() => { _this.$nextTick(() => {
_this.rowDrop() _this.data = newArray
_this.$nextTick(() => {
_this.$refs.scFormTable.style.removeProperty('height')
})
}) })
} }
}) })
@ -95,4 +108,5 @@
.sc-form-table .sc-form-table-handle button {display: none;} .sc-form-table .sc-form-table-handle button {display: none;}
.sc-form-table .hover-row .sc-form-table-handle span {display: none;} .sc-form-table .hover-row .sc-form-table-handle span {display: none;}
.sc-form-table .hover-row .sc-form-table-handle button {display: inline-block;} .sc-form-table .hover-row .sc-form-table-handle button {display: inline-block;}
.sc-form-table .move {text-align: center;font-size: 14px;margin-top: 3px;}
</style> </style>