Explorar o código

费用支出明细添加展开折叠功能,样式修改

haizhouwang %!s(int64=2) %!d(string=hai) anos
pai
achega
d9f664762b

+ 4 - 4
src/views/FinancialManagement/ExpenseManagement/ExpenseManagement.vue

@@ -720,25 +720,25 @@ export default {
         {
           prop: "collectionMessage",
           label: "收账方",
-          minWidth: 80,
+          minWidth: 160,
           sortable: false,
         },
         {
           prop: "applyAmount",
           label: "金额",
-          minWidth: 150,
+          minWidth: 100,
           sortable: false,
         },
         {
           prop: "applyTime",
           label: "转账日期",
-          minWidth: 150,
+          minWidth: 100,
           sortable: false,
         },
         {
           prop: "transferFlagName",
           label: "转账状态",
-          minWidth: 150,
+          minWidth: 80,
           sortable: false,
         },
       ],

+ 22 - 6
src/views/FinancialManagement/ExpenseManagement/ExpenseMessage.vue

@@ -10,12 +10,21 @@
       @click="addAmount"
       >新增科目</el-button
     >
+    <el-button
+      class="operation"
+      type="primary"
+      plain
+      size="medium"
+      @click="setexpandAll"
+      >全部展开/折叠</el-button
+    >
 
     <!-- 表格 -->
     <el-table
-    class="expendtable"
+      v-if="refTable"
+      class="expendtable"
       :stripe="true"
-      default-expand-all
+      :default-expand-all="expandStatus"
       :header-cell-style="{
         background: '#F2F7FC',
         fontWeight: '900',
@@ -27,7 +36,7 @@
       border
       :tree-props="{ children: 'child', hasChildren: 'hasChildren' }"
     >
-      <el-table-column prop="category" align="center" label="类目">
+      <el-table-column prop="category" align="left" width="300" label="类目">
       </el-table-column>
       <el-table-column prop="remark" align="center" label="备注">
       </el-table-column>
@@ -106,19 +115,19 @@
   <script>
 import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
 import KtButton from "@/views/Core/KtButton"; // 按钮权限组件
-import CommonUtil from "@/utils/comutil.js";
 
 export default {
   name: "ExpenseMessage",
   components: { KtCommonTable, KtButton },
   created() {
-    // this.business();
   },
   mounted() {
     this.findPage();
   },
   data() {
     return {
+      refTable:true,//表格重新渲染
+      expandStatus: false, //是否全部展开
       title: "新增明细",
       tableData: [], //表格数据
       button3Name: "删除",
@@ -148,6 +157,13 @@ export default {
     },
   },
   methods: {
+    setexpandAll() {
+      this.expandStatus = !this.expandStatus;
+      this.refTable = false;
+      this.$nextTick(() => {
+        this.refTable = true;
+      });
+    },
     //删除
     handleDelete(index, row) {
       let id = row.expensesId;
@@ -346,7 +362,7 @@ export default {
 .frame >>> .el-date-editor {
   width: 100%;
 }
-.expendtable >>> .el-table__body-wrapper{
+.expendtable >>> .el-table__body-wrapper {
   overflow-y: auto;
   height: 600px;
 }