From fc15f2e904fade9e1505bad70b29829d7d99c124 Mon Sep 17 00:00:00 2001
From: lzhe <lzhe@example.com>
Date: 星期三, 05 六月 2024 12:04:59 +0800
Subject: [PATCH] 1
---
src/components/scFormTable/index.vue | 198 +++++++++++++++++++++++++++++--------------------
1 files changed, 116 insertions(+), 82 deletions(-)
diff --git a/src/components/scFormTable/index.vue b/src/components/scFormTable/index.vue
index cb44888..9e7649c 100644
--- a/src/components/scFormTable/index.vue
+++ b/src/components/scFormTable/index.vue
@@ -3,8 +3,8 @@
* @version: 1.3
* @Author: sakuya
* @Date: 2023骞�2鏈�9鏃�12:32:26
- * @LastEditors: sakuya
- * @LastEditTime: 2023骞�2鏈�17鏃�10:41:47
+ * @LastEditors: Sneed
+ * @LastEditTime: 2024-04-17 22:09:27
-->
<template>
@@ -12,112 +12,146 @@
<el-table :data="data" ref="table" border stripe>
<el-table-column type="index" width="50" fixed="left">
<template #header>
- <el-button v-if="!hideAdd" type="primary" icon="el-icon-plus" size="small" circle @click="rowAdd"></el-button>
+ <el-button v-if="!hideAdd" type="primary" icon="el-icon-plus" size="small" circle
+ @click="rowAdd"></el-button>
</template>
<template #default="scope">
- <div :class="['sc-form-table-handle', {'sc-form-table-handle-delete':!hideDelete}]">
- <span>{{scope.$index + 1}}</span>
- <el-button v-if="!hideDelete" type="danger" icon="el-icon-delete" size="small" plain circle @click="rowDel(scope.row, scope.$index)"></el-button>
+ <div :class="['sc-form-table-handle', { 'sc-form-table-handle-delete': !hideDelete }]">
+ <span>{{ scope.$index + 1 }}</span>
+ <el-popconfirm v-if="!scope.row.isSet" title="纭畾鍒犻櫎鍚楋紵"
+ @confirm="rowDel(scope.row, scope.$index)">
+ <template #reference>
+ <el-button v-if="!hideDelete" type="danger" icon="el-icon-delete" size="small" plain
+ circle></el-button>
+ <!-- <el-button text type="primary" size="small">鍒犻櫎</el-button> -->
+ </template>
+ </el-popconfirm>
+
</div>
</template>
</el-table-column>
<el-table-column label="" width="50" v-if="dragSort">
<template #default>
- <div class="move" style="cursor: move;"><el-icon-d-caret style="width: 1em; height: 1em;"/></div>
+ <div class="move" style="cursor: move;"><el-icon-d-caret style="width: 1em; height: 1em;" /></div>
</template>
</el-table-column>
<slot></slot>
<template #empty>
- {{placeholder}}
+ {{ placeholder }}
</template>
</el-table>
</div>
</template>
<script>
- import Sortable from 'sortablejs'
+import Sortable from 'sortablejs'
- export default {
- props: {
- modelValue: { type: Array, default: () => [] },
- addTemplate: { type: Object, default: () => {} },
- placeholder: { type: String, default: "鏆傛棤鏁版嵁" },
- dragSort: { type: Boolean, default: false },
- hideAdd: { type: Boolean, default: false },
- hideDelete: { type: Boolean, default: false }
- },
- data(){
- return {
- data: []
- }
- },
- mounted(){
+export default {
+ props: {
+ modelValue: { type: Array, default: () => [] },
+ addTemplate: { type: Object, default: () => { } },
+ placeholder: { type: String, default: "鏆傛棤鏁版嵁" },
+ dragSort: { type: Boolean, default: false },
+ hideAdd: { type: Boolean, default: false },
+ hideDelete: { type: Boolean, default: false }
+ },
+ data() {
+ return {
+ data: []
+ }
+ },
+ mounted() {
+ this.data = this.modelValue
+ if (this.dragSort) {
+ this.rowDrop()
+ }
+ },
+ watch: {
+ modelValue() {
this.data = this.modelValue
- if(this.dragSort){
- this.rowDrop()
- }
},
- watch:{
- modelValue(){
- this.data = this.modelValue
+ data: {
+ handler() {
+ this.$emit('update:modelValue', this.data);
},
- data: {
- handler(){
- this.$emit('update:modelValue', this.data);
- },
- deep: true
- }
- },
- methods: {
- rowDrop(){
- const _this = this
- const tbody = this.$refs.table.$el.querySelector('.el-table__body-wrapper tbody')
- Sortable.create(tbody, {
- handle: ".move",
- animation: 300,
- ghostClass: "ghost",
- onEnd({ newIndex, oldIndex }) {
- _this.data.splice(newIndex, 0, _this.data.splice(oldIndex, 1)[0])
- const newArray = _this.data.slice(0)
- const tmpHeight = _this.$refs.scFormTable.offsetHeight
- _this.$refs.scFormTable.style.setProperty('height', tmpHeight + 'px')
- _this.data = []
- _this.$nextTick(() => {
- _this.data = newArray
- _this.$nextTick(() => {
- _this.$refs.scFormTable.style.removeProperty('height')
- })
+ deep: true
+ }
+ },
+ methods: {
+ rowDrop() {
+ const _this = this
+ const tbody = this.$refs.table.$el.querySelector('.el-table__body-wrapper tbody')
+ Sortable.create(tbody, {
+ handle: ".move",
+ animation: 300,
+ ghostClass: "ghost",
+ onEnd({ newIndex, oldIndex }) {
+ _this.data.splice(newIndex, 0, _this.data.splice(oldIndex, 1)[0])
+ const newArray = _this.data.slice(0)
+ const tmpHeight = _this.$refs.scFormTable.offsetHeight
+ _this.$refs.scFormTable.style.setProperty('height', tmpHeight + 'px')
+ _this.data = []
+ _this.$nextTick(() => {
+ _this.data = newArray
+ _this.$nextTick(() => {
+ _this.$emit('rowDrop', newArray)
+ _this.$refs.scFormTable.style.removeProperty('height')
})
- }
- })
- },
- rowAdd(){
- const temp = JSON.parse(JSON.stringify(this.addTemplate))
- this.data.push(temp)
- },
- rowDel(row, index){
- this.data.splice(index, 1)
- },
- //鎻掑叆琛�
- pushRow(row){
- const temp = row || JSON.parse(JSON.stringify(this.addTemplate))
- this.data.push(temp)
- },
- //鏍规嵁index鍒犻櫎
- deleteRow(index){
- this.data.splice(index, 1)
- }
+
+ })
+ }
+ })
+ },
+ rowAdd() {
+ const temp = JSON.parse(JSON.stringify(this.addTemplate))
+ this.data.push(temp)
+ },
+ rowDel(row, index) {
+ this.$emit('delRow', row)
+ this.data.splice(index, 1)
+ },
+ //鎻掑叆琛�
+ pushRow(row) {
+ const temp = row || JSON.parse(JSON.stringify(this.addTemplate))
+ this.data.push(temp)
+ },
+ //鏍规嵁index鍒犻櫎
+ deleteRow(index) {
+ this.data.splice(index, 1)
}
}
+}
</script>
<style scoped>
- .sc-form-table {width: 100%;}
- .sc-form-table .sc-form-table-handle {text-align: center;}
- .sc-form-table .sc-form-table-handle span {display: inline-block;}
- .sc-form-table .sc-form-table-handle button {display: none;}
- .sc-form-table .hover-row .sc-form-table-handle-delete span {display: none;}
- .sc-form-table .hover-row .sc-form-table-handle-delete button {display: inline-block;}
- .sc-form-table .move {text-align: center;font-size: 14px;margin-top: 3px;}
+.sc-form-table {
+ width: 100%;
+}
+
+.sc-form-table .sc-form-table-handle {
+ text-align: center;
+}
+
+.sc-form-table .sc-form-table-handle span {
+ display: inline-block;
+}
+
+.sc-form-table .sc-form-table-handle button {
+ display: none;
+}
+
+.sc-form-table .hover-row .sc-form-table-handle-delete span {
+ display: none;
+}
+
+.sc-form-table .hover-row .sc-form-table-handle-delete button {
+ display: inline-block;
+}
+
+.sc-form-table .move {
+ text-align: center;
+ font-size: 14px;
+ margin-top: 3px;
+}
</style>
--
Gitblit v1.9.3