From 4aa873012e92cd7b059051e40c31475667fb5cfb Mon Sep 17 00:00:00 2001
From: dusicong <dusicong@syxysoft.com>
Date: Wed, 24 Mar 2021 17:38:16 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E4=BF=AE=E6=94=B9=E3=80=91j-table?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 jero-web/src/components/table/jTable.vue |  46 +++--
 jero-web/src/views/jero/jtable1.vue      | 241 ++++++++++++-----------
 2 files changed, 160 insertions(+), 127 deletions(-)

diff --git a/jero-web/src/components/table/jTable.vue b/jero-web/src/components/table/jTable.vue
index bed737c1..53602629 100644
--- a/jero-web/src/components/table/jTable.vue
+++ b/jero-web/src/components/table/jTable.vue
@@ -1,14 +1,22 @@
 <template>
   <div>
     <!-- TODO 使用标签 应每个参数一行，保持整体写法统一和美观度-->
-    <a-table
-      :columns="aColumns"
-      :dataSource="dataSource"
-      :pagination="ispagination"
+    <a-table 
+      :columns="aColumns" 
+      :dataSource="dataSource" 
+      :pagination="ispagination" 
       :rowSelection="rowSelect"
-      bordered
-      :scroll="{ x: 1920 }"
     >
+      <span slot="action" slot-scope="text, record">
+        <a>Invite 一 {{ record.name }}</a>
+        <a-divider type="vertical" />
+        <a>Delete</a>
+        <a-divider type="vertical" />
+        <a class="ant-dropdown-link">
+          More actions
+          <a-icon type="down" />
+        </a>
+      </span>
       <span :slot="a.slots.title" v-for="a in aColumns" :key="a.dataIndex">
         {{ a.slots.title }}
         <a-dropdown :trigger="['click']">
@@ -34,12 +42,7 @@
               </a-menu-item>
             </a-sub-menu>
             <a-sub-menu key="check" title="筛选列头">
-              <a-checkbox-group
-                v-model="checkedList"
-                :options="plainOptions"
-                @change="onChange"
-                :style="checkboxStyle"
-              />
+              <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
             </a-sub-menu>
           </a-menu>
         </a-dropdown>
@@ -113,10 +116,6 @@ export default {
         height: '30px',
         lineHeight: '30px',
       },
-      checkboxStyle: {
-        display: 'block',
-        lineHeight: '30px',
-      },
     }
   },
   computed: {
@@ -306,4 +305,19 @@ export default {
 .ant-dropdown-menu-submenu-popup {
   width: 7.5rem;
 }
+
+.ant-checkbox-group-item {
+  line-height: 30px;
+  padding-left: 15px;
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* autoprefixer: off */
+  -webkit-box-orient: vertical;
+  -moz-box-orient: vertical;
+  /* autoprefixer: on */
+  -webkit-line-clamp: 1;
+  word-wrap: break-word;
+  word-break: break-all;
+}
 </style>
diff --git a/jero-web/src/views/jero/jtable1.vue b/jero-web/src/views/jero/jtable1.vue
index bc81d5ce..20a1eae9 100644
--- a/jero-web/src/views/jero/jtable1.vue
+++ b/jero-web/src/views/jero/jtable1.vue
@@ -1,25 +1,32 @@
 <template>
   <a-card :bordered="false">
-    <j-table :isShowPage="isShowPage" :isCheck="isCheck" :isShowDropdown="isShowDropdown" :dataSource="dataSource"
-      :columns="columns">
+    <j-table
+      :isShowPage="isShowPage"
+      :isCheck="isCheck"
+      :isShowDropdown="isShowDropdown"
+      :dataSource="dataSource"
+      :columns="columns"
+      bordered
+    >
     </j-table>
   </a-card>
 </template>
 
 <script>
-  import JTable from '@/components/table/jTable'
+import JTable from '@/components/table/jTable'
 
-  export default {
-    name: 'Jtable',
-    components: {
-      JTable
-    },
-    data() {
-      return {
-        isShowPage: true, // 是否显示分页
-        isCheck: false, // 是否多选
-        isShowDropdown: true, //是否开启下拉功能
-        dataSource: [{
+export default {
+  name: 'Jtable',
+  components: {
+    JTable,
+  },
+  data() {
+    return {
+      isShowPage: true, // 是否显示分页
+      isCheck: false, // 是否多选
+      isShowDropdown: true, //是否开启下拉功能
+      dataSource: [
+        {
           key: '1',
           name: '胡彦斌1',
           age: 35,
@@ -29,7 +36,8 @@
           address3: '西湖区湖底公园1号',
           address4: '西湖区湖底公园1号',
           address5: '西湖区湖底公园1号',
-        }, {
+        },
+        {
           key: '2',
           name: '胡彦斌2',
           age: 32,
@@ -39,7 +47,8 @@
           address3: '西湖区湖底公园1号',
           address4: '西湖区湖底公园1号',
           address5: '西湖区湖底公园1号',
-        }, {
+        },
+        {
           key: '3',
           name: '胡彦斌3',
           age: 32,
@@ -49,7 +58,8 @@
           address3: '西湖区湖底公园1号',
           address4: '西湖区湖底公园1号',
           address5: '西湖区湖底公园1号',
-        }, {
+        },
+        {
           key: '4',
           name: '胡彦斌4',
           age: 32,
@@ -59,7 +69,8 @@
           address3: '西湖区湖底公园1号',
           address4: '西湖区湖底公园1号',
           address5: '西湖区湖底公园1号',
-        }, {
+        },
+        {
           key: '5',
           name: '胡彦斌5',
           age: 38,
@@ -69,7 +80,8 @@
           address3: '西湖区湖底公园1号',
           address4: '西湖区湖底公园1号',
           address5: '西湖区湖底公园1号',
-        }, {
+        },
+        {
           key: '6',
           name: '胡彦斌6',
           age: 32,
@@ -79,108 +91,115 @@
           address3: '西湖区湖底公园1号',
           address4: '西湖区湖底公园1号',
           address5: '西湖区湖底公园1号',
-        }],
-        columns: [{
-            // title: '姓名',
-            dataIndex: 'name',
-            key: 1,
-            width: 200,
-            slots: {
-              title: '姓名',
-              // 冻结列头的参数
-              // 1为左侧冻结
-              // 2为右侧冻结
-              // 3为不冻结或解冻
-              fixedValue: 3
-            },
-            // fixed: 'right'
+        },
+      ],
+      columns: [
+        {
+          // title: '姓名',
+          dataIndex: 'name',
+          key: 1,
+          width: 200,
+          slots: {
+            title: '姓名',
+            // 冻结列头的参数
+            // 1为左侧冻结
+            // 2为右侧冻结
+            // 3为不冻结或解冻
+            fixedValue: 3,
           },
-          {
-            // title: '年龄',
-            dataIndex: 'age',
-            key: 2,
-            width: 200,
-            slots: {
-              title: '年龄',
-              fixedValue: 3
-            },
-            // sorter: (a, b) => a.age - b.age,
+          // fixed: 'right'
+        },
+        {
+          // title: '年龄',
+          dataIndex: 'age',
+          key: 2,
+          width: 200,
+          slots: {
+            title: '年龄',
+            fixedValue: 3,
           },
-          {
-            // title: '住址',
-            dataIndex: 'address',
-            key: 3,
-            width: 200,
-            slots: {
-              title: '住址',
-              fixedValue: 3
-            },
-            // sorter: (a, b) => a.address.length - b.address.length,
+          sorter: (a, b) => a.age - b.age,
+        },
+        {
+          // title: '住址',
+          dataIndex: 'address',
+          key: 3,
+          width: 200,
+          // sorter: true,
+          slots: {
+            title: '住址',
+            fixedValue: 3,
           },
-          {
-            // title: '住址1',
-            dataIndex: 'address1',
-            key: 4,
-            width: 200,
-            slots: {
-              title: '住址1',
-              fixedValue: 3
-            }
+          sorter: (a, b) => a.address.length - b.address.length,
+        },
+        {
+          // title: '住址1',
+          dataIndex: 'address1',
+          key: 4,
+          width: 200,
+          slots: {
+            title: '住址1',
+            fixedValue: 3,
           },
-          {
-            // title: '住址2',
-            dataIndex: 'address2',
-            key: 5,
-            width: 200,
-            slots: {
-              title: '住址2',
-              fixedValue: 3
-            }
+        },
+        {
+          // title: '住址2',
+          dataIndex: 'address2',
+          key: 5,
+          width: 200,
+          slots: {
+            title: '住址2',
+            fixedValue: 3,
           },
-          {
-            // title: '住址3',
-            dataIndex: 'address3',
-            key: 6,
-            width: 200,
-            slots: {
-              title: '住址3',
-              fixedValue: 3
-            }
+        },
+        {
+          // title: '住址3',
+          dataIndex: 'address3',
+          key: 6,
+          width: 200,
+          slots: {
+            title: '住址3',
+            fixedValue: 3,
           },
-          {
-            // title: '住址4',
-            dataIndex: 'address4',
-            key: 7,
-            width: 200,
-            slots: {
-              title: '住址4',
-              fixedValue: 3
-            }
+        },
+        {
+          // title: '住址4',
+          dataIndex: 'address4',
+          key: 7,
+          width: 200,
+          slots: {
+            title: '住址4',
+            fixedValue: 3,
           },
-          {
-            // title: '住址5',
-            dataIndex: 'address5',
-            key: 8,
-            slots: {
-              title: '住址5',
-              fixedValue: 3
-            }
+        },
+        {
+          // title: '住址5',
+          dataIndex: 'address5',
+          key: 8,
+          width: 500,
+          slots: {
+            title: '住址5',
+            fixedValue: 3,
           },
-        ],
-      }
-    },
-    mounted() {
-
-    },
-    watch: {
-
-    },
-    methods: {
-
+        },
+        {
+          dataIndex: 'address6',
+          key: 9,
+          width: 500,
+          slots: {
+            title: '操作',
+            fixedValue: 3,
+          },
+          scopedSlots: { customRender: 'action' },
+        },
+      ],
     }
-  }
+  },
+  mounted() {},
+  watch: {},
+  methods: {},
+}
 </script>
 
 <style scoped>
-
 </style>