【修改】j-table样式问题

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

@@ -6,9 +6,17 @@
       :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
+              <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
-                v-model="checkedList"
-                :options="plainOptions"
-                @change="onChange"
-                :style="checkboxStyle"
-              />
             </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>

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"
+    <j-table
-      :columns="columns">
+      :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 {
+export default {
   name: 'Jtable',
   components: {
-      JTable
+    JTable,
   },
   data() {
     return {
       isShowPage: true, // 是否显示分页
       isCheck: false, // 是否多选
       isShowDropdown: true, //是否开启下拉功能
-        dataSource: [{
+      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,8 +91,10 @@
           address3: '西湖区湖底公园1号',
           address4: '西湖区湖底公园1号',
           address5: '西湖区湖底公园1号',
-        }],
+        },
-        columns: [{
+      ],
+      columns: [
+        {
           // title: '姓名',
           dataIndex: 'name',
           key: 1,
@@ -91,7 +105,7 @@
             // 1为左侧冻结
             // 2为右侧冻结
             // 3为不冻结或解冻
-              fixedValue: 3
+            fixedValue: 3,
           },
           // fixed: 'right'
         },
@@ -102,20 +116,21 @@
           width: 200,
           slots: {
             title: '年龄',
-              fixedValue: 3
+            fixedValue: 3,
           },
-            // sorter: (a, b) => a.age - b.age,
+          sorter: (a, b) => a.age - b.age,
         },
         {
           // title: '住址',
           dataIndex: 'address',
           key: 3,
           width: 200,
+          // sorter: true,
           slots: {
             title: '住址',
-              fixedValue: 3
+            fixedValue: 3,
           },
-            // sorter: (a, b) => a.address.length - b.address.length,
+          sorter: (a, b) => a.address.length - b.address.length,
         },
         {
           // title: '住址1',
@@ -124,8 +139,8 @@
           width: 200,
           slots: {
             title: '住址1',
-              fixedValue: 3
+            fixedValue: 3,
-            }
+          },
         },
         {
           // title: '住址2',
@@ -134,8 +149,8 @@
           width: 200,
           slots: {
             title: '住址2',
-              fixedValue: 3
+            fixedValue: 3,
-            }
+          },
         },
         {
           // title: '住址3',
@@ -144,8 +159,8 @@
           width: 200,
           slots: {
             title: '住址3',
-              fixedValue: 3
+            fixedValue: 3,
-            }
+          },
         },
         {
           // title: '住址4',
@@ -154,33 +169,37 @@
           width: 200,
           slots: {
             title: '住址4',
-              fixedValue: 3
+            fixedValue: 3,
-            }
+          },
         },
         {
           // title: '住址5',
           dataIndex: 'address5',
           key: 8,
+          width: 500,
           slots: {
             title: '住址5',
-              fixedValue: 3
+            fixedValue: 3,
-            }
+          },
+        },
+        {
+          dataIndex: 'address6',
+          key: 9,
+          width: 500,
+          slots: {
+            title: '操作',
+            fixedValue: 3,
+          },
+          scopedSlots: { customRender: 'action' },
         },
       ],
     }
   },
-    mounted() {
+  mounted() {},
-
+  watch: {},
-    },
+  methods: {},
-    watch: {
+}
-
-    },
-    methods: {
-
-    }
-  }
 </script>
 
 <style scoped>
-
 </style>