From 8bb45cc9743eccab8ec5a77be3da51241d622227 Mon Sep 17 00:00:00 2001
From: Kongwenbo <15515341245@163.com>
Date: Mon, 4 May 2020 17:19:06 +0800
Subject: [PATCH] Update tables.vue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.格式化
2.优化tables组件，修改setDefaultSearchKey方法，解决表格同时有复选框列和索引列的控制台错误
3.同步修改handleSearch方法，添加searchKey的非空判断
---
 src/components/tables/tables.vue | 245 ++++++++++++++++++-------------
 1 file changed, 139 insertions(+), 106 deletions(-)

diff --git a/src/components/tables/tables.vue b/src/components/tables/tables.vue
index 8b9d461cf..4d3d490b3 100644
--- a/src/components/tables/tables.vue
+++ b/src/components/tables/tables.vue
@@ -2,10 +2,23 @@
   <div>
     <div v-if="searchable && searchPlace === 'top'" class="search-con search-con-top">
       <Select v-model="searchKey" class="search-col">
-        <Option v-for="item in columns" v-if="item.key !== 'handle'" :value="item.key" :key="`search-col-${item.key}`">{{ item.title }}</Option>
+        <Option
+          v-for="item in columns"
+          v-if="item.key !== 'handle'"
+          :value="item.key"
+          :key="`search-col-${item.key}`"
+        >{{ item.title }}</Option>
       </Select>
-      <Input @on-change="handleClear" clearable placeholder="输入关键字搜索" class="search-input" v-model="searchValue"/>
-      <Button @click="handleSearch" class="search-btn" type="primary"><Icon type="search"/>&nbsp;&nbsp;搜索</Button>
+      <Input
+        @on-change="handleClear"
+        clearable
+        placeholder="输入关键字搜索"
+        class="search-input"
+        v-model="searchValue"
+      />
+      <Button @click="handleSearch" class="search-btn" type="primary">
+        <Icon type="search" />&nbsp;&nbsp;搜索
+      </Button>
     </div>
     <Table
       ref="tablesMain"
@@ -40,32 +53,39 @@
     </Table>
     <div v-if="searchable && searchPlace === 'bottom'" class="search-con search-con-top">
       <Select v-model="searchKey" class="search-col">
-        <Option v-for="item in columns" v-if="item.key !== 'handle'" :value="item.key" :key="`search-col-${item.key}`">{{ item.title }}</Option>
+        <Option
+          v-for="item in columns"
+          v-if="item.key !== 'handle'"
+          :value="item.key"
+          :key="`search-col-${item.key}`"
+        >{{ item.title }}</Option>
       </Select>
-      <Input placeholder="输入关键字搜索" class="search-input" v-model="searchValue"/>
-      <Button class="search-btn" type="primary"><Icon type="search"/>&nbsp;&nbsp;搜索</Button>
+      <Input placeholder="输入关键字搜索" class="search-input" v-model="searchValue" />
+      <Button class="search-btn" type="primary">
+        <Icon type="search" />&nbsp;&nbsp;搜索
+      </Button>
     </div>
     <a id="hrefToExportTable" style="display: none;width: 0px;height: 0px;"></a>
   </div>
 </template>
 
 <script>
-import TablesEdit from './edit.vue'
-import handleBtns from './handle-btns'
-import './index.less'
+import TablesEdit from "./edit.vue";
+import handleBtns from "./handle-btns";
+import "./index.less";
 export default {
-  name: 'Tables',
+  name: "Tables",
   props: {
     value: {
       type: Array,
-      default () {
-        return []
+      default() {
+        return [];
       }
     },
     columns: {
       type: Array,
-      default () {
-        return []
+      default() {
+        return [];
       }
     },
     size: String,
@@ -93,8 +113,8 @@ export default {
     },
     rowClassName: {
       type: Function,
-      default () {
-        return ''
+      default() {
+        return "";
       }
     },
     context: {
@@ -132,7 +152,7 @@ export default {
      */
     searchPlace: {
       type: String,
-      default: 'top'
+      default: "top"
     }
   },
   /**
@@ -141,18 +161,18 @@ export default {
    * @on-cancel-edit 返回值 {Object} 同上
    * @on-save-edit 返回值 {Object} ：除上面三个参数外，还有一个value: 修改后的数据
    */
-  data () {
+  data() {
     return {
       insideColumns: [],
       insideTableData: [],
-      edittingCellId: '',
-      edittingText: '',
-      searchValue: '',
-      searchKey: ''
-    }
+      edittingCellId: "",
+      edittingText: "",
+      searchValue: "",
+      searchKey: ""
+    };
   },
   methods: {
-    suportEdit (item, index) {
+    suportEdit(item, index) {
       item.render = (h, params) => {
         return h(TablesEdit, {
           props: {
@@ -162,116 +182,129 @@ export default {
             editable: this.editable
           },
           on: {
-            'input': val => {
-              this.edittingText = val
+            input: val => {
+              this.edittingText = val;
             },
-            'on-start-edit': (params) => {
-              this.edittingCellId = `editting-${params.index}-${params.column.key}`
-              this.$emit('on-start-edit', params)
+            "on-start-edit": params => {
+              this.edittingCellId = `editting-${params.index}-${params.column.key}`;
+              this.$emit("on-start-edit", params);
             },
-            'on-cancel-edit': (params) => {
-              this.edittingCellId = ''
-              this.$emit('on-cancel-edit', params)
+            "on-cancel-edit": params => {
+              this.edittingCellId = "";
+              this.$emit("on-cancel-edit", params);
             },
-            'on-save-edit': (params) => {
-              this.value[params.row.initRowIndex][params.column.key] = this.edittingText
-              this.$emit('input', this.value)
-              this.$emit('on-save-edit', Object.assign(params, { value: this.edittingText }))
-              this.edittingCellId = ''
+            "on-save-edit": params => {
+              this.value[params.row.initRowIndex][
+                params.column.key
+              ] = this.edittingText;
+              this.$emit("input", this.value);
+              this.$emit(
+                "on-save-edit",
+                Object.assign(params, { value: this.edittingText })
+              );
+              this.edittingCellId = "";
             }
           }
-        })
-      }
-      return item
+        });
+      };
+      return item;
     },
-    surportHandle (item) {
-      let options = item.options || []
-      let insideBtns = []
+    surportHandle(item) {
+      let options = item.options || [];
+      let insideBtns = [];
       options.forEach(item => {
-        if (handleBtns[item]) insideBtns.push(handleBtns[item])
-      })
-      let btns = item.button ? [].concat(insideBtns, item.button) : insideBtns
+        if (handleBtns[item]) insideBtns.push(handleBtns[item]);
+      });
+      let btns = item.button ? [].concat(insideBtns, item.button) : insideBtns;
       item.render = (h, params) => {
-        params.tableData = this.value
-        return h('div', btns.map(item => item(h, params, this)))
-      }
-      return item
-    },
-    handleColumns (columns) {
+        params.tableData = this.value;
+        return h(
+          "div",
+          btns.map(item => item(h, params, this))
+        );
+      };
+      return item;
+    },
+    handleColumns(columns) {
       this.insideColumns = columns.map((item, index) => {
-        let res = item
-        if (res.editable) res = this.suportEdit(res, index)
-        if (res.key === 'handle') res = this.surportHandle(res)
-        return res
-      })
-    },
-    setDefaultSearchKey () {
-      this.searchKey = this.columns[0].key !== 'handle' ? this.columns[0].key : (this.columns.length > 1 ? this.columns[1].key : '')
-    },
-    handleClear (e) {
-      if (e.target.value === '') this.insideTableData = this.value
-    },
-    handleSearch () {
-      this.insideTableData = this.value.filter(item => item[this.searchKey].indexOf(this.searchValue) > -1)
+        let res = item;
+        if (res.editable) res = this.suportEdit(res, index);
+        if (res.key === "handle") res = this.surportHandle(res);
+        return res;
+      });
+    },
+    setDefaultSearchKey() {
+      let relColumns = this.columns.filter(item => item.key != "handle");
+      this.searchKey = relColumns.length > 0 ? relColumns[0].key : "";
+    },
+    handleClear(e) {
+      if (e.target.value === "") this.insideTableData = this.value;
+    },
+    handleSearch() {
+      if (this.searchKey) {
+        this.insideTableData = this.value.filter(
+          item => item[this.searchKey].indexOf(this.searchValue) > -1
+        );
+      }
     },
-    handleTableData () {
+    handleTableData() {
       this.insideTableData = this.value.map((item, index) => {
-        let res = item
-        res.initRowIndex = index
-        return res
-      })
+        let res = item;
+        res.initRowIndex = index;
+        return res;
+      });
     },
-    exportCsv (params) {
-      this.$refs.tablesMain.exportCsv(params)
+    exportCsv(params) {
+      this.$refs.tablesMain.exportCsv(params);
     },
-    clearCurrentRow () {
-      this.$refs.talbesMain.clearCurrentRow()
+    clearCurrentRow() {
+      this.$refs.talbesMain.clearCurrentRow();
     },
-    onCurrentChange (currentRow, oldCurrentRow) {
-      this.$emit('on-current-change', currentRow, oldCurrentRow)
+    onCurrentChange(currentRow, oldCurrentRow) {
+      this.$emit("on-current-change", currentRow, oldCurrentRow);
     },
-    onSelect (selection, row) {
-      this.$emit('on-select', selection, row)
+    onSelect(selection, row) {
+      this.$emit("on-select", selection, row);
     },
-    onSelectCancel (selection, row) {
-      this.$emit('on-select-cancel', selection, row)
+    onSelectCancel(selection, row) {
+      this.$emit("on-select-cancel", selection, row);
     },
-    onSelectAll (selection) {
-      this.$emit('on-select-all', selection)
+    onSelectAll(selection) {
+      this.$emit("on-select-all", selection);
     },
-    onSelectionChange (selection) {
-      this.$emit('on-selection-change', selection)
+    onSelectionChange(selection) {
+      this.$emit("on-selection-change", selection);
     },
-    onSortChange (column, key, order) {
-      this.$emit('on-sort-change', column, key, order)
+    onSortChange(column, key, order) {
+      this.$emit("on-sort-change", column, key, order);
     },
-    onFilterChange (row) {
-      this.$emit('on-filter-change', row)
+    onFilterChange(row) {
+      this.$emit("on-filter-change", row);
     },
-    onRowClick (row, index) {
-      this.$emit('on-row-click', row, index)
+    onRowClick(row, index) {
+      this.$emit("on-row-click", row, index);
     },
-    onRowDblclick (row, index) {
-      this.$emit('on-row-dblclick', row, index)
+    onRowDblclick(row, index) {
+      this.$emit("on-row-dblclick", row, index);
     },
-    onExpand (row, status) {
-      this.$emit('on-expand', row, status)
+    onExpand(row, status) {
+      this.$emit("on-expand", row, status);
     }
   },
   watch: {
-    columns (columns) {
-      this.handleColumns(columns)
-      this.setDefaultSearchKey()
+    columns(columns) {
+      this.handleColumns(columns);
+      this.setDefaultSearchKey();
     },
-    value (val) {
-      this.handleTableData()
-      if (this.searchable) this.handleSearch()
+    value(val) {
+      this.handleTableData();
+      if (this.searchable) this.handleSearch();
     }
   },
-  mounted () {
-    this.handleColumns(this.columns)
-    this.setDefaultSearchKey()
-    this.handleTableData()
+  mounted() {
+    this.handleColumns(this.columns);
+    this.setDefaultSearchKey();
+    this.handleTableData();
   }
-}
+};
 </script>