优化表格数据

jero-web/src/components/tableDate/index.vue

@@ -4,11 +4,9 @@
       <table class="box-table" cellpadding="0" cellspacing="0">
         <thead>
         <tr id="table_thead_tr">
-          <a-checkbox-group @change="checkboxAll($event)">
-            <th class="checkbox" style="margin-top: 24px;display: inline-block">
-              <a-checkbox></a-checkbox>
-            </th>
-          </a-checkbox-group>
+          <th class="checkbox" style="margin-top: 24px;display: inline-block">
+            <a-checkbox :checked="tableAll" :indeterminate="indeterminate" @change="checkboxAll($event)"></a-checkbox>
+          </th>
         </tr>
         </thead>
         <tbody id="table_tbody_tr">
@@ -20,11 +18,8 @@
             <td v-for="val in Object.keys(item)" v-if="val != 'id'" class="box-td" :title="item[val]">
               {{item[val]}}
             </td>
-            <td class="box-td box-th-po">
-              <a class="text" v-if="Collection">收藏</a>
-              <a class="text" v-if="subscribe">订阅</a>
-              <a class="text" v-if="edit">编辑</a>
-              <a class="text" v-if="del">删除</a>
+            <td class="box-td box-th-po" v-if="isOperation">
+              <a class="text" v-for="(ol,index) in OperationList" @click="OperationClick(ol,item)">{{ol.text}}</a>
             </td>
           </tr>
         </a-checkbox-group>
@@ -50,26 +45,21 @@
   export default {
     name: 'index',
     props: {
-      edit: {
-        type: Boolean,
-        default: false
-      },
-      del: {
-        type: Boolean,
-        default: false
-      },
-      Collection: {
-        type: Boolean,
-        default: false
-      },
-      subscribe: {
-        type: Boolean,
-        default: false
-      },
+      //接口
       url: {
         type: Object,
         default: {}
-      }
+      },
+      // 操作按钮
+      OperationList: {
+        type: Array,
+        default: []
+      },
+      //是否显示操作；默认显示
+      isOperation:{
+        type: Boolean,
+        default:true,
+      },
     },
     data() {
       return {
@@ -122,34 +112,39 @@
             'col7': 0.6
           }
         ],
-        checkboxList: []
+        checkboxList: [],
+        tableAll: false,
+        indeterminate: false
       }
     },
     mounted() {
       eventBUs.$on('searchQuery', target => {
-        console.log(target);
-      });
+        console.log(target)
+      })
       eventBUs.$on('searchReset', target => {
-        console.log(target);
-      });
+        console.log(target)
+      })
       this.getData()
     },
     methods: {
       getData() {
         var jsonHead = this.jsonHead
         for (var i = 0; i < jsonHead.length; i++) {
-
           $('#table_thead_tr').append('<th class="box-th">' + jsonHead[i].enName + '</br>' + jsonHead[i].name + '</th>')
         }
-        let th = '<th class="box-th box-th-po">' + 'Operation ' + '</br>' + '操作' + '</th>'
-        $('#table_thead_tr').append(th)
+        if (this.isOperation){
+          let th = '<th class="box-th box-th-po">' + 'Operation ' + '</br>' + '操作' + '</th>'
+          $('#table_thead_tr').append(th)
+        }
       },
-      checkboxChange(value) {
-        console.log(value)
+      checkboxChange(checkedList) {
+        this.indeterminate = !!checkedList.length && checkedList.length < this.jsonBody.length
+        this.tableAll = checkedList.length === this.jsonBody.length
       },
       checkboxAll(event) {
+        this.tableAll = event.target.checked
         this.checkboxList = []
-        if (event.length > 0) {
+        if (this.tableAll) {
           this.jsonBody.forEach(res => {
             this.checkboxList.push(res.id)
           })
@@ -157,6 +152,9 @@
       },
       onChange() {
 
+      },
+      OperationClick(ol, item) {
+        this.$emit(ol.ClickEvent, item)
       }
     }
   }

jero-web/src/views/ceshiList/index.vue

@@ -7,7 +7,12 @@
       <a-button @click="handleCompare()" type="primary" icon="plus">{{$t('DataComparison')}}</a-button>
     </div>
     <div>
-      <tableData edit del :url="{}"/>
+      <tableData
+        :OperationList="OperationList"
+        @editTable="editTable"
+        @deleteTable="deleteTable"
+        :url="{}"
+      />
     </div>
     <addForm ref="addFormClick"/>
   </a-card>
@@ -33,6 +38,24 @@
           { name: '名称', placeholder: '请输入姓名', attrModel: 'name', enName: 'title' },
           { name: '标题', placeholder: '请输入标题', attrModel: 'title', enName: 'title' }
         ],
+        OperationList: [
+          {
+            text: '编辑',
+            ClickEvent: 'editTable'
+          },
+          {
+            text: '删除',
+            ClickEvent: 'deleteTable'
+          },
+          {
+            text: '收藏',
+            ClickEvent: 'Collection'
+          },
+          {
+            text: '订阅',
+            ClickEvent: 'subscribe'
+          }
+        ],
         selectedRowKeys: [],
         dataSource: [],
         loading: false,
@@ -73,7 +96,13 @@
       },
       handleCompare() {
         this.$refs.addFormClick.add()
-      }
+      },
+      editTable(item) {
+        console.log(item)
+      },
+      deleteTable(){
+        console.log(3)
+      },
     }
   }
 </script>