应用设置

gaoshp

2024-04-17 ca3903e09980b98a1a46af0c339e9ca00fa04ccd

 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,12 +12,21 @@
      <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>
                  <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>
@@ -77,6 +86,7 @@
               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
@@ -85,6 +95,7 @@
                  _this.$nextTick(() => {
                     _this.data = newArray
                     _this.$nextTick(() => {
                     _this.$emit('rowDrop', newArray)
                        _this.$refs.scFormTable.style.removeProperty('height')
                     })

@@ -97,6 +108,7 @@
            this.data.push(temp)
         },
         rowDel(row, index){
         this.$emit('delRow', row)
            this.data.splice(index, 1)
         },
         //插入行
@@ -113,11 +125,33 @@
</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>