【修改】JTable传参问题修改

jero-web/src/components/jero/JTable.vue

@@ -1,52 +1,49 @@
 <template>
   <div>
     <!-- TODO 使用标签 应每个参数一行，保持整体写法统一和美观度-->
-    <a-table 
+    <a-table
-      :columns="aColumns" 
+      :columns="aColumns"
-      :dataSource="dataSource" 
+      :dataSource="dataSource"
-      :pagination="ispagination" 
+      :pagination="ispagination"
       :rowSelection="rowSelect"
-    >
+      v-bind="$props"
-      <span slot="action" slot-scope="text, record">
+      v-on="$listeners">
-        <a>Invite 一 {{ record.name }}</a>
+
-        <a-divider type="vertical" />
+      <template v-for="(slotItem) of slots" :slot="slotItem" slot-scope="text, record, index">
-        <a>Delete</a>
+        <slot :name="slotItem" v-bind="{text, record, index}"></slot>
-        <a-divider type="vertical" />
+      </template>
-        <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.title }}
-        <a-dropdown :trigger="['click']">
+          <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="caret-down" v-if="isShowIcon" />
+              <a-icon type="caret-down" v-if="isShowIcon" />
-          </a>
+            </a>
-          <a-menu slot="overlay">
+            <a-menu slot="overlay">
-            <a-sub-menu key="frozen" title="冻结列头">
+              <a-sub-menu key="frozen" title="冻结列头">
-              <a-menu-item>
+                <a-menu-item>
-                <a-radio-group
+                  <a-radio-group
-                  v-model="a.slots.fixedValue"
+                    v-model="a.slots.fixedValue"
-                  @change="
+                    @change="
-                    (e) => {
+                      (e) => {
-                      fixedChange(e, a.dataIndex)
+                        fixedChange(e, a.dataIndex)
-                    }
+                      }
-                  "
+                    "
-                >
+                  >
-                  <a-radio :style="radioStyle" :value="1"> 左侧冻结 </a-radio>
+                    <a-radio :style="radioStyle" :value="1"> 左侧冻结 </a-radio>
-                  <a-radio :style="radioStyle" :value="2"> 右侧冻结 </a-radio>
+                    <a-radio :style="radioStyle" :value="2"> 右侧冻结 </a-radio>
-                  <a-radio :style="radioStyle" :value="3"> 解冻 </a-radio>
+                    <a-radio :style="radioStyle" :value="3"> 解冻 </a-radio>
-                </a-radio-group>
+                  </a-radio-group>
-              </a-menu-item>
+                </a-menu-item>
-            </a-sub-menu>
+              </a-sub-menu>
-            <a-sub-menu key="check" title="筛选列头">
+              <a-sub-menu key="check" title="筛选列头">
-              <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
+                <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
-            </a-sub-menu>
+              </a-sub-menu>
-          </a-menu>
+            </a-menu>
-        </a-dropdown>
+          </a-dropdown>
-      </span>
+        </span>
+
     </a-table>
   </div>
 </template>
@@ -55,7 +52,6 @@
 import { Table } from 'ant-design-vue'
 
 export default {
-  // TODO 命名和全局保持统一，应为JTable
   name: 'JTable',
   props: Object.assign(
     {
@@ -140,14 +136,25 @@ export default {
         return false
       }
     },
+    slots() {
+      let slots = []
+      for (let column of this.columns) {
+        if (column.scopedSlots && column.scopedSlots.customRender) {
+          slots.push(column.scopedSlots.customRender)
+        }
+      }
+      return slots
+    }
   },
   mounted() {
     // console.log(this.aColumns)
+    // console.log(this.columns)
+    console.log(this.$attrs)
     // 遍历出筛选列头的所有选项
     this.columns.forEach((item) => {
       let colItem = {
-        value: item.slots.title,
+        value: item.title,
-        label: item.slots.title,
+        label: item.title,
         disabled: false,
       }
       this.plainOptions.push(colItem)
@@ -161,12 +168,11 @@ export default {
     }
     // 遍历出筛选列头中的已选项
     this.aColumns.forEach((item) => {
-      this.checkedList.push(item.slots.title)
+      this.checkedList.push(item.title)
     })
   },
   methods: {
     // 用户可自行筛选列头显示的字段
-    // TODO 该段代码复杂，建议逻辑复杂的代码，在方法名上注释清楚大致逻辑
     onChange(e) {
       // 只剩一个时候,最后一个多选按钮禁用
       if (this.checkedList.length === 1) {
@@ -187,7 +193,7 @@ export default {
       //转换为dataIndex
       for (let i = 0; i < e.length; i++) {
         this.columns.find((item) => {
-          if (item.slots.title === e[i]) {
+          if (item.title === e[i]) {
             trfList.push(item.dataIndex)
           }
         })

jero-web/src/views/demo/list/JTableDemo.vue

@@ -8,6 +8,11 @@
       :columns="columns"
       bordered
     >
+      <!-- 参数必须加 {} 包裹，否则只能拿到一个对象 -->
+      <span slot="action" slot-scope="{text, record, index}">
+        text: {{ text }}- record:{{ record }}- index:{{ index }}
+      </span>
+
     </j-table>
   </a-card>
 </template>
@@ -95,7 +100,7 @@ export default {
       ],
       columns: [
         {
-          // title: '姓名',
+          title: '姓名',
           dataIndex: 'name',
           key: 1,
           width: 200,
@@ -108,86 +113,88 @@ export default {
             fixedValue: 3,
           },
           // fixed: 'right'
+
         },
         {
-          // title: '年龄',
+          title: '年龄',
           dataIndex: 'age',
           key: 2,
           width: 200,
           slots: {
-            title: '年龄',
+            // title: '年龄',
             fixedValue: 3,
           },
-          sorter: (a, b) => a.age - b.age,
+          sorter: true,
         },
         {
-          // title: '住址',
+          title: '住址',
           dataIndex: 'address',
           key: 3,
           width: 200,
           // sorter: true,
           slots: {
-            title: '住址',
+            // title: '住址',
             fixedValue: 3,
           },
           sorter: (a, b) => a.address.length - b.address.length,
         },
         {
-          // title: '住址1',
+          title: '住址1',
           dataIndex: 'address1',
           key: 4,
           width: 200,
           slots: {
-            title: '住址1',
+            // title: '住址1',
             fixedValue: 3,
           },
         },
         {
-          // title: '住址2',
+          title: '住址2',
           dataIndex: 'address2',
           key: 5,
           width: 200,
           slots: {
-            title: '住址2',
+            // title: '住址2',
             fixedValue: 3,
           },
         },
         {
-          // title: '住址3',
+          title: '住址3',
           dataIndex: 'address3',
           key: 6,
           width: 200,
           slots: {
-            title: '住址3',
+            // title: '住址3',
             fixedValue: 3,
           },
         },
         {
-          // title: '住址4',
+          title: '住址4',
           dataIndex: 'address4',
           key: 7,
           width: 200,
           slots: {
-            title: '住址4',
+            // title: '住址4',
             fixedValue: 3,
           },
         },
         {
-          // title: '住址5',
+          title: '住址5',
           dataIndex: 'address5',
           key: 8,
           width: 500,
           slots: {
-            title: '住址5',
+            // title: '住址5',
             fixedValue: 3,
           },
         },
         {
+          title: '操作',
           dataIndex: 'address6',
           key: 9,
           width: 500,
           slots: {
-            title: '操作',
+            // title: '操作',
             fixedValue: 3,
           },
           scopedSlots: { customRender: 'action' },