增行 删行

develop/@gms/gms-plugin-billexpand/src/control/vxe-achievements/achievements.vue

 <template>
   <div class="bill-achievements">
     <Button type="primary" @click="Primary">Primary</Button>
-    <vxe-table border ref="xTable" :data="tableData" :show-header="false">
+    <vxe-table
+      border
+      ref="xTable"
+      :data="tableData"
+      :show-header="false"
+    >
       <vxe-table-column
         field="name"
         title="name"
@@ -56,63 +61,57 @@ export default {
           type: "vxeTableControl",
           attr: {
             showHeader: false,
+            addObj: {
+              name: "",
+              value: "",
+            },
             tableData: [
               {
                 name: "资金总额：",
                 value: "",
-                width: 200,
               },
               {
                 name: " (一)上级工会预算拨款：",
                 value: "",
-                width: 200,
               },
               {
                 name: "1.工会经费：",
                 value: "",
-                width: 200,
               },
               {
                 name: "2.财政拨款：",
                 value: "",
-                width: 200,
               },
               {
                 name: "(二)自有资金：",
                 value: "",
-                width: 200,
               },
               {
                 name: "1.工会经费：",
                 value: "",
-                width: 200,
               },
               {
                 name: "2.财政补助收入：",
                 value: "",
-                width: 200,
               },
               {
                 name: "3.行政补助收入：",
                 value: "",
-                width: 200,
               },
               {
                 name: "4.事业收入：",
                 value: "",
-                width: 200,
               },
               {
                 name: "5.经营性收入：",
                 value: "",
-                width: 200,
               },
             ],
             columns: [
               {
                 field: "name",
                 title: "收入名称",
-                width: 150,
+                width: 230,
                 type: "inputControl",
               },
               {
@@ -138,28 +137,30 @@ export default {
           type: "vxeTableControl",
           attr: {
             showHeader: false,
+            addObj: {
+              name: "",
+              value: "",
+            },
             tableData: [
               {
                 name: "项目立项的依据",
                 value: "",
-                width: 200,
               },
               {
                 name: "项目申报的可行性",
                 value: "",
-                width: 200,
               },
               {
                 name: "项目申报的必要性",
                 value: "",
-                width: 200,
               },
             ],
             columns: [
               {
                 field: "name",
                 title: "立项情况",
-                width: 200,
+                width: 230,
+                type: "inputControl"
               },
               {
                 field: "value",
@@ -175,6 +176,11 @@ export default {
           attr: {
             showHeader: false,
             headerOne: [0],
+            addObj: {
+              content: "",
+              startTime: "",
+              endTime: "",
+            },
             tableData: [
               {
                 content: "项目实施内容",
@@ -224,6 +230,10 @@ export default {
           attr: {
             showHeader: false,
             headerOne: [0],
+            addObj: {
+              longGoal: "",
+              yearGoal: "",
+            },
             tableData: [
               {
                 longGoal: "长期目标",
@@ -256,6 +266,13 @@ export default {
           attr: {
             showHeader: false,
             headerOne: [0, 5],
+            addObj: {
+              firstIndex: "",
+              secondIndex: "",
+              content: "",
+              indexValue: "",
+              remark: "",
+            },
             tableData: [
               {
                 firstIndex: "一级指标",
@@ -427,6 +444,13 @@ export default {
           attr: {
             showHeader: false,
             headerOne: [0, 3],
+            addObj: {
+              firstIndex: "",
+              secondIndex: "",
+              content: "",
+              indexValue: "",
+              remark: "",
+            },
             tableData: [
               {
                 firstIndex: "一级指标",
@@ -637,9 +661,9 @@ export default {
   watch: {},
   computed: {},
   methods: {
-    Primary(){
-       console.log(this.tableData)
-    }
+    Primary() {
+      console.log(this.tableData);
+    },
   },
   mounted() {},
   created() {},
@@ -647,16 +671,16 @@ export default {
 };
 </script>
 <style lang="less">
-.rbcInputControl input{
+.rbcInputControl input {
   margin-left: -10px;
   width: calc(100% + 18px);
   height: 40px;
-  margin-top:-3px;
-  border:none
+  margin-top: -3px;
+  border: none;
 }
 .bill-achievements {
   width: 1300px;
-  
+
   .vxe-table--render-default .vxe-body--column:not(.col--ellipsis) {
     padding: 0;
     line-height: 44px;

develop/@gms/gms-plugin-billexpand/src/control/vxe-achievements/components/vxe-table.vue

@@ -2,11 +2,13 @@
   <div class="detail-table">
     <vxe-table
       border
-      ref="xTable"
+      ref="detailXTable"
       :data="attr.attr.tableData"
       :show-header="attr.attr.showHeader || false"
       :header-cell-class-name="headerCellClassName"
       :span-method="spanMethods"
+      :menu-config="tableMenu"
+      @menu-click="contextMenuClickEvent"
     >
       <template v-for="(column, index) in attr.attr.columns">
         <vxe-table-column
@@ -52,7 +54,18 @@ export default {
     inputControl,
   },
   data() {
-    return {};
+    return {
+       tableMenu: {
+        body: {
+          options: [
+            [
+              { code: "addRow", name: "增行", disabled: false },
+              { code: "removeRow", name: "删行", disabled: false },
+            ],
+          ],
+        },
+      },
+    };
   },
   props: {
     attr: {
@@ -87,6 +100,21 @@ export default {
         }
       }
     },
+    contextMenuClickEvent({ menu, row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event }) {
+      console.log(menu,  row, rowIndex, column, columnIndex);
+      let detailXTable = this.$refs.detailXTable;
+      switch (menu.code) {
+        case "addRow":
+          this.attr.attr.tableData.splice(rowIndex+1,0,this.attr.attr.addObj)
+          break;
+        case "removeRow":
+          if(this.attr.attr.tableData.length>1){
+            detailXTable.remove(row)
+          }
+          break;
+        default:
+      }
+    },
   },
   mounted() {},
   created() {},