From f91180effe08e673e7fc291772e98f618d8d1f26 Mon Sep 17 00:00:00 2001
From: dusicong <dusicong@syxysoft.com>
Date: Fri, 19 Mar 2021 17:57:27 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E6=96=B0=E5=A2=9E=E3=80=91j-table?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 jero-web/src/components/table/jTable.vue | 218 +++++++++++++++++++++++
 jero-web/src/views/jero/jtable1.vue      | 179 +++++++++++++++++++
 2 files changed, 397 insertions(+)
 create mode 100644 jero-web/src/components/table/jTable.vue
 create mode 100644 jero-web/src/views/jero/jtable1.vue

diff --git a/jero-web/src/components/table/jTable.vue b/jero-web/src/components/table/jTable.vue
new file mode 100644
index 00000000..5d9be646
--- /dev/null
+++ b/jero-web/src/components/table/jTable.vue
@@ -0,0 +1,218 @@
+<template>
+  <div>
+    <a-table :columns="aColumns" :dataSource="dataSource" :pagination="ispagination" :rowSelection="rowSelect" bordered
+      :scroll="{ x: 1920 }">
+      <!-- <a slot="name" slot-scope="text,scope">{{ scope.age }}</a> -->
+      <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-icon type="down" />
+          </a>
+          <a-menu slot="overlay">
+            <a-sub-menu key="dj" title="冻结列头">
+              <a-menu-item>
+                <a-radio-group v-model="value" @change="((e)=>{fixedC(e,a.dataIndex)})">
+                  <a-radio :style="radioStyle" :value="1">
+                    左侧冻结
+                  </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>
+            <a-sub-menu key="sx" title="筛选列头">
+              <a-menu-item>
+                <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
+              </a-menu-item>
+            </a-sub-menu>
+          </a-menu>
+        </a-dropdown>
+      </span>
+    </a-table>
+  </div>
+</template>
+
+<script>
+  import {
+    Table
+  } from 'ant-design-vue'
+
+  export default {
+    name: 'Jtable',
+    props: Object.assign({
+      isShowPage: {
+        type: Boolean,
+        default () {
+          return true
+        }
+      },
+      isCheck: {
+        type: Boolean,
+        default () {
+          return true
+        }
+      },
+    }, Table.props, {
+      rowSelection: {
+        type: Object,
+        default () {
+          return {
+            type: 'checkbox'
+          }
+        }
+      },
+      pagination: {
+        type: Object,
+        default () {
+          return {
+            current: 1,
+            pageSize: 10,
+            pageSizeOptions: ['10', '20', '30'],
+            showTotal: (total, range) => {
+              return range[0] + "-" + range[1] + " 共" + total + "条"
+            },
+            showQuickJumper: true,
+            showSizeChanger: true,
+            total: 0
+          }
+        }
+      },
+    }),
+    data() {
+      return {
+        aColumns: this.columns,
+        midColumns: this.columns,
+        checkedList: [],
+        plainOptions: [],
+
+        fixedList: [],
+        fixedOptions: [],
+        value: 3,
+        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)
+      let pList = []
+      this.columns.forEach((item) => {
+        pList.push(item.dataIndex)
+      })
+      this.plainOptions = pList
+      this.checkedList = pList
+
+      this.fixedOptions = pList
+    },
+    methods: {
+      // 用户可自行筛选列头显示的字段
+      onChange(e) {
+        let newList = [] //最初始list
+        let resList = [] //两个数组不同
+        this.columns.forEach((item) => {
+          newList.push(item.dataIndex)
+        })
+
+        function getArrDifference(arr1, arr2) {
+          return arr1.concat(arr2).filter(function(v, i, arr) {
+            return arr.indexOf(v) === arr.lastIndexOf(v);
+          });
+        }
+        resList = getArrDifference(e, newList)
+        if (resList.length === 0) {
+          // 如果数组为空，则把父组件传过来的表头赋值给
+          this.aColumns = this.columns
+          return
+        }
+        for (let i = 0; i < resList.length; i++) {
+          this.midColumns = this.midColumns.filter(item =>
+            item.dataIndex !== resList[i]
+          )
+        }
+        this.aColumns = this.midColumns
+        //重置
+        this.midColumns = this.columns
+      },
+      // 用户可自行冻结列头
+      // fixedChange(e) {
+      //   //先判断有没有修改，
+      //   if (e.length === 0) {
+      //     this.aColumns.forEach((item) => {
+      //       if (item.fixed) {
+      //         item.fixed = false
+      //       }
+      //     })
+      //     return
+      //   }
+      //   //清空所有fixed属性
+      //   for (let i = 0; i < e.length; i++) {
+      //     this.aColumns.forEach((item) => {
+      //       if (item.fixed) {
+      //         item.fixed = false
+      //       }
+      //     })
+      //   }
+      //   //把对应点击的fixed属性变为true
+      //   for (let i = 0; i < e.length; i++) {
+      //     this.aColumns.find(item => {
+      //       if (item.dataIndex === e[i]) {
+      //         item.fixed = true
+      //       }
+      //     })
+      //   }
+      // },
+      fixedC(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 {
+    display: block;
+    margin-bottom: 8px;
+  }
+</style>
diff --git a/jero-web/src/views/jero/jtable1.vue b/jero-web/src/views/jero/jtable1.vue
new file mode 100644
index 00000000..13a8445a
--- /dev/null
+++ b/jero-web/src/views/jero/jtable1.vue
@@ -0,0 +1,179 @@
+<template>
+  <a-card :bordered="false">
+    <j-table :isShowPage="isShowPage" :isCheck="isCheck" :dataSource="dataSource" :columns="columns"></j-table>
+  </a-card>
+</template>
+
+<script>
+  import JTable from '@/components/table/jTable'
+
+  export default {
+    name: 'Jtable',
+    components: {
+      JTable
+    },
+    data() {
+      return {
+        isShowPage: true, // 是否显示分页
+        isCheck: false, // 是否多选
+        dataSource: [{
+          key: '1',
+          name: '胡彦斌',
+          age: 32,
+          address: '西湖区湖底公园1号',
+          address1: '西湖区湖底公园1号',
+          address2: '西湖区湖底公园1号',
+          address3: '西湖区湖底公园1号',
+          address4: '西湖区湖底公园1号',
+          address5: '西湖区湖底公园1号',
+        }, {
+          key: '2',
+          name: '胡彦斌',
+          age: 32,
+          address: '西湖区湖底公园1号',
+          address1: '西湖区湖底公园1号',
+          address2: '西湖区湖底公园1号',
+          address3: '西湖区湖底公园1号',
+          address4: '西湖区湖底公园1号',
+          address5: '西湖区湖底公园1号',
+        }, {
+          key: '3',
+          name: '胡彦斌',
+          age: 32,
+          address: '西湖区湖底公园1号',
+          address1: '西湖区湖底公园1号',
+          address2: '西湖区湖底公园1号',
+          address3: '西湖区湖底公园1号',
+          address4: '西湖区湖底公园1号',
+          address5: '西湖区湖底公园1号',
+        }, {
+          key: '4',
+          name: '胡彦斌',
+          age: 32,
+          address: '西湖区湖底公园1号',
+          address1: '西湖区湖底公园1号',
+          address2: '西湖区湖底公园1号',
+          address3: '西湖区湖底公园1号',
+          address4: '西湖区湖底公园1号',
+          address5: '西湖区湖底公园1号',
+        }, {
+          key: '5',
+          name: '胡彦斌',
+          age: 32,
+          address: '西湖区湖底公园1号',
+          address1: '西湖区湖底公园1号',
+          address2: '西湖区湖底公园1号',
+          address3: '西湖区湖底公园1号',
+          address4: '西湖区湖底公园1号',
+          address5: '西湖区湖底公园1号',
+        }, {
+          key: '6',
+          name: '胡彦斌',
+          age: 32,
+          address: '西湖区湖底公园1号',
+          address1: '西湖区湖底公园1号',
+          address2: '西湖区湖底公园1号',
+          address3: '西湖区湖底公园1号',
+          address4: '西湖区湖底公园1号',
+          address5: '西湖区湖底公园1号',
+        }],
+        columns: [{
+            // title: '姓名',
+            dataIndex: 'name',
+            key: 'name',
+            width: 200,
+            slots: {
+              title: '姓名'
+            }
+          },
+          {
+            // title: '年龄',
+            dataIndex: 'age',
+            key: 'age',
+            width: 200,
+            slots: {
+              title: '年龄'
+            }
+          },
+          {
+            // title: '住址',
+            dataIndex: 'address',
+            key: 'address',
+            width: 200,
+            slots: {
+              title: '住址'
+            }
+          },
+          {
+            // title: '住址1',
+            dataIndex: 'address1',
+            key: 'address1',
+            width: 200,
+            slots: {
+              title: '住址1'
+            }
+          },
+          {
+            // title: '住址2',
+            dataIndex: 'address2',
+            key: 'address2',
+            width: 200,
+            slots: {
+              title: '住址2'
+            }
+          },
+          {
+            // title: '住址3',
+            dataIndex: 'address3',
+            key: 'address3',
+            width: 200,
+            slots: {
+              title: '住址3'
+            }
+          },
+          {
+            // title: '住址4',
+            dataIndex: 'address4',
+            key: 'address4',
+            width: 200,
+            slots: {
+              title: '住址4'
+            }
+          },
+          {
+            // title: '住址5',
+            dataIndex: 'address5',
+            key: 'address5',
+            slots: {
+              title: '住址5'
+            }
+          },
+        ],
+        pagination: {
+          current: 1,
+          pageSize: 5,
+          pageSizeOptions: ['5', '10', '20'],
+          showTotal: (total, range) => {
+            return range[0] + "-" + range[1] + " 共" + total + "条"
+          },
+          showQuickJumper: true,
+          showSizeChanger: true,
+          total: 0
+        }
+      }
+    },
+    mounted() {
+
+    },
+    watch: {
+
+    },
+    methods: {
+
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>