【修改】JTable规范代码

jero-web/src/components/table/jTable.vue

@@ -1,28 +1,35 @@
 <template>
   <div>
     <!-- TODO 使用标签 应每个参数一行，保持整体写法统一和美观度-->
-    <a-table :columns="aColumns" :dataSource="dataSource" :pagination="ispagination" :rowSelection="rowSelect" bordered
+    <a-table
-      :scroll="{ x: 1920 }">
+      :columns="aColumns"
-      <!-- <a slot="name" slot-scope="text,scope">{{ scope.age }}</a> -->
+      :dataSource="dataSource"
-      <span :slot="a.slots.title" v-for="a in aColumns" :key='a.dataIndex'>{{a.slots.title}}
+      :pagination="ispagination"
+      :rowSelection="rowSelect"
+      bordered
+      :scroll="{ x: 1920 }"
+    >
+      <span :slot="a.slots.title" v-for="a in aColumns" :key="a.dataIndex">
+        {{ a.slots.title }}
         <a-dropdown :trigger="['click']">
-          <a class="ant-dropdown-link" @click="e => e.preventDefault()">
+          <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
             <!-- 操作 -->
             <a-icon type="down" />
           </a>
           <a-menu slot="overlay">
             <a-sub-menu key="dj" title="冻结列头">
               <a-menu-item>
-                <a-radio-group v-model="a.slots.fixedValue" @change="((e)=>{fixedChange(e,a.dataIndex)})">
+                <a-radio-group
-                  <a-radio :style="radioStyle" :value="1">
+                  v-model="a.slots.fixedValue"
-                    左侧冻结
+                  @change="
-                  </a-radio>
+                    (e) => {
-                  <a-radio :style="radioStyle" :value="2">
+                      fixedChange(e, a.dataIndex)
-                    右侧冻结
+                    }
-                  </a-radio>
+                  "
-                  <a-radio :style="radioStyle" :value="3">
+                >
-                    解冻
+                  <a-radio :style="radioStyle" :value="1"> 左侧冻结 </a-radio>
-                  </a-radio>
+                  <a-radio :style="radioStyle" :value="2"> 右侧冻结 </a-radio>
+                  <a-radio :style="radioStyle" :value="3"> 解冻 </a-radio>
                 </a-radio-group>
               </a-menu-item>
             </a-sub-menu>
@@ -39,162 +46,165 @@
 </template>
 
 <script>
-  import {
+import { Table } from 'ant-design-vue'
-    Table
-  } from 'ant-design-vue'
 
-  export default {
+export default {
-    // TODO 命名和全局保持统一，应为JTable
+  // TODO 命名和全局保持统一，应为JTable
-    name: 'JTable',
+  name: 'JTable',
-    props: Object.assign({
+  props: Object.assign(
+    {
       isShowPage: {
         type: Boolean,
-        default () {
+        default() {
           return true
-        }
+        },
       },
       isCheck: {
         type: Boolean,
-        default () {
+        default() {
           return true
-        }
+        },
       },
-    }, Table.props, {
+    },
+    Table.props,
+    {
       rowSelection: {
         type: Object,
-        default () {
+        default() {
           return {
-            type: 'checkbox'
+            type: 'checkbox',
           }
-        }
+        },
       },
       pagination: {
         type: Object,
-        default () {
+        default() {
           return {
             current: 1,
             pageSize: 10,
             pageSizeOptions: ['10', '20', '30'],
             showTotal: (total, range) => {
-              return range[0] + "-" + range[1] + " 共" + total + "条"
+              return range[0] + '-' + range[1] + ' 共' + total + '条'
             },
             showQuickJumper: true,
             showSizeChanger: true,
-            total: 0
+            total: 0,
           }
-        }
-      },
-    }),
-    data() {
-      return {
-        aColumns: this.columns,
-        checkedList: [],
-        plainOptions: [],
-        radioStyle: {
-          display: 'block',
-          height: '30px',
-          lineHeight: '30px',
         },
-      }
-    },
-    computed: {
-      rowSelect() {
-        if (this.isCheck) {
-          return this.rowSelection
-        } else {
-          return null
-        }
       },
-      ispagination() {
-        if (this.isShowPage) {
-          return this.pagination
-        } else {
-          return false
-        }
-      },
-    },
-    mounted() {
-      // console.log(this.aColumns)
-      // 遍历出筛选列头的所有选项
-      this.columns.forEach((item) => {
-        this.plainOptions.push(item.dataIndex)
-      })
-
-      // 读取localStorage中的数据
-      var storageCloumns = JSON.parse(localStorage.getItem("pro__Cloumns"))
-      // console.log(storageCloumns)
-      if (storageCloumns) {
-        this.aColumns = storageCloumns
-      }
-      // 遍历出筛选列头中的已选项
-      this.aColumns.forEach((item) => {
-        this.checkedList.push(item.dataIndex)
-      })
-    },
-    methods: {
-      // 用户可自行筛选列头显示的字段
-      // TODO 该段代码复杂，建议逻辑复杂的代码，在方法名上注释清楚大致逻辑
-      onChange(e) {
-        let initList = [] //最初始list
-        let diffList = [] //两个数组不同
-        // 首先遍历父组件传来的columns,拿到其中每一项的dataIndex,形成一个最初始的数组
-        this.columns.forEach((item) => {
-          initList.push(item.dataIndex)
-        })
-        // 拿到两个数组的不同的项
-        diffList = this.getArrDifference(e, initList)
-        if (diffList.length === 0) {
-          // 如果数组为空，则把父组件传过来的表头赋值给
-          this.aColumns = this.columns
-          localStorage.setItem("pro__Cloumns", JSON.stringify(this.aColumns))
-          return
-        }
-        // TODO midColumns这个变量应该声明为局部变量，作为全局变量但没有全局使用是不合理的
-        let midColumns = this.columns
-        for (let i = 0; i < diffList.length; i++) {
-          midColumns = midColumns.filter(item =>
-            item.dataIndex !== diffList[i]
-          )
-        }
-        this.aColumns = midColumns
-
-        localStorage.setItem("pro__Cloumns", JSON.stringify(this.aColumns))
-        // console.log(JSON.parse(localStorage.getItem("pro__Cloumns")))
-      },
-      getArrDifference(arr1, arr2) {
-        return arr1.concat(arr2).filter(function(v, i, arr) {
-          return arr.indexOf(v) === arr.lastIndexOf(v);
-        });
-      },
-      fixedChange(e, dataIndex) {
-        // console.log(e.target.value, dataIndex)
-        if (e.target.value === 1) { //左侧冻结
-          this.aColumns.find(item => {
-            if (item.dataIndex === dataIndex) {
-              item.fixed = 'left'
-            }
-          })
-        } else if (e.target.value === 2) { //右侧冻结
-          this.aColumns.find(item => {
-            if (item.dataIndex === dataIndex) {
-              item.fixed = 'right'
-            }
-          })
-        } else {
-          this.aColumns.find(item => { //解冻
-            if (item.dataIndex === dataIndex) {
-              item.fixed = false
-            }
-          })
-        }
-      }
     }
-  }
+  ),
+  data() {
+    return {
+      aColumns: this.columns,
+      checkedList: [],
+      plainOptions: [],
+      radioStyle: {
+        display: 'block',
+        height: '30px',
+        lineHeight: '30px',
+      },
+    }
+  },
+  computed: {
+    rowSelect() {
+      if (this.isCheck) {
+        return this.rowSelection
+      } else {
+        return null
+      }
+    },
+    ispagination() {
+      if (this.isShowPage) {
+        return this.pagination
+      } else {
+        return false
+      }
+    },
+  },
+  mounted() {
+    // console.log(this.aColumns)
+    // 遍历出筛选列头的所有选项
+    this.columns.forEach((item) => {
+      this.plainOptions.push(item.dataIndex)
+    })
+
+    // 读取localStorage中的数据
+    var storageCloumns = JSON.parse(localStorage.getItem('pro__Cloumns'))
+    // console.log(storageCloumns)
+    if (storageCloumns) {
+      this.aColumns = storageCloumns
+    }
+    // 遍历出筛选列头中的已选项
+    this.aColumns.forEach((item) => {
+      this.checkedList.push(item.dataIndex)
+    })
+  },
+  methods: {
+    // 用户可自行筛选列头显示的字段
+    // TODO 该段代码复杂，建议逻辑复杂的代码，在方法名上注释清楚大致逻辑
+    onChange(e) {
+      let initList = [] //最初始list
+      let diffList = [] //两个数组不同
+      // 首先遍历父组件传来的columns,拿到其中每一项的dataIndex,形成一个最初始的数组
+      this.columns.forEach((item) => {
+        initList.push(item.dataIndex)
+      })
+      // 拿到两个数组的不同的项
+      diffList = this.getArrDifference(e, initList)
+      if (diffList.length === 0) {
+        // 如果数组为空，则把父组件传过来的表头赋值给
+        this.aColumns = this.columns
+        localStorage.setItem('pro__Cloumns', JSON.stringify(this.aColumns))
+        return
+      }
+      // TODO midColumns这个变量应该声明为局部变量，作为全局变量但没有全局使用是不合理的
+      let midColumns = this.columns
+      for (let i = 0; i < diffList.length; i++) {
+        midColumns = midColumns.filter((item) => item.dataIndex !== diffList[i])
+      }
+      this.aColumns = midColumns
+
+      localStorage.setItem('pro__Cloumns', JSON.stringify(this.aColumns))
+      // console.log(JSON.parse(localStorage.getItem("pro__Cloumns")))
+    },
+    getArrDifference(arr1, arr2) {
+      return arr1.concat(arr2).filter(function (v, i, arr) {
+        return arr.indexOf(v) === arr.lastIndexOf(v)
+      })
+    },
+    fixedChange(e, dataIndex) {
+      // console.log(e.target.value, dataIndex)
+      if (e.target.value === 1) {
+        //左侧冻结
+        this.aColumns.find((item) => {
+          if (item.dataIndex === dataIndex) {
+            item.fixed = 'left'
+          }
+        })
+      } else if (e.target.value === 2) {
+        //右侧冻结
+        this.aColumns.find((item) => {
+          if (item.dataIndex === dataIndex) {
+            item.fixed = 'right'
+          }
+        })
+      } else {
+        this.aColumns.find((item) => {
+          //解冻
+          if (item.dataIndex === dataIndex) {
+            item.fixed = false
+          }
+        })
+      }
+    },
+  },
+}
 </script>
 
 <style>
-  .ant-checkbox-group-item {
+.ant-checkbox-group-item {
-    display: block;
+  display: block;
-    margin-bottom: 8px;
+  margin-bottom: 8px;
-  }
+}
 </style>