Browse Source

fix: s-table checkbox props #274
- fix showPagination prop setter boolean type err #267

Sendya 5 năm trước cách đây
mục cha
commit
e388d31f0e
2 tập tin đã thay đổi với 34 bổ sung12 xóa
  1. 19 9
      src/components/Table/index.js
  2. 15 3
      src/views/list/TableList.vue

+ 19 - 9
src/components/Table/index.js

@@ -109,7 +109,8 @@ export default {
       current: localPageNum,
       pageSize: this.pageSize,
       showSizeChanger: this.showSizeChanger
-    })
+    }) || false
+    console.log('this.localPagination', this.localPagination)
     this.needTotalList = this.initTotalList(this.columns)
     this.loadData()
   },
@@ -135,9 +136,9 @@ export default {
       this.localLoading = true
       const parameter = Object.assign({
         pageNo: (pagination && pagination.current) ||
-            this.localPagination.current || this.pageNum,
+          this.showPagination && this.localPagination.current || this.pageNum,
         pageSize: (pagination && pagination.pageSize) ||
-            this.localPagination.pageSize || this.pageSize
+          this.showPagination && this.localPagination.pageSize || this.pageSize
       },
       (sorter && sorter.field && {
         sortField: sorter.field
@@ -148,29 +149,36 @@ export default {
         ...filters
       }
       )
+      console.log('parameter', parameter)
       const result = this.data(parameter)
       // 对接自己的通用数据接口需要修改下方代码中的 r.pageNo, r.totalCount, r.data
       // eslint-disable-next-line
       if ((typeof result === 'object' || typeof result === 'function') && typeof result.then === 'function') {
         result.then(r => {
-          this.localPagination = Object.assign({}, this.localPagination, {
+          this.localPagination = this.showPagination && Object.assign({}, this.localPagination, {
             current: r.pageNo, // 返回结果中的当前分页数
             total: r.totalCount, // 返回结果中的总记录数
             showSizeChanger: this.showSizeChanger,
             pageSize: (pagination && pagination.pageSize) ||
               this.localPagination.pageSize
-          })
+          }) || false
           // 为防止删除数据后导致页面当前页面数据长度为 0 ,自动翻页到上一页
-          if (r.data.length === 0 && this.localPagination.current > 1) {
+          if (r.data.length === 0 && this.showPagination && this.localPagination.current > 1) {
             this.localPagination.current--
             this.loadData()
             return
           }
 
-          // 这里用于判断接口是否有返回 r.totalCount 或 this.showPagination = false
+          // 这里用于判断接口是否有返回 r.totalCount 且 this.showPagination = true 且 pageNo 和 pageSize 存在 且 totalCount 小于等于 pageNo * pageSize 的大小
           // 当情况满足时,表示数据不满足分页大小,关闭 table 分页功能
-
-          (!this.showPagination || !r.totalCount && this.showPagination === 'auto') && (this.localPagination.hideOnSinglePage = true)
+          try {
+            if ((['auto', true].includes(this.showPagination) && r.totalCount <= (r.pageNo * pagination.pageSize))) {
+              this.localPagination.hideOnSinglePage = true
+            }
+          } catch (e) {
+            this.localPagination = false
+          }
+          console.log('loadData -> this.localPagination', this.localPagination)
           this.localDataSource = r.data // 返回结果中的数组数据
           this.localLoading = false
         })
@@ -272,7 +280,9 @@ export default {
       if (k === 'rowSelection') {
         if (showAlert && this.rowSelection) {
           // 如果需要使用alert,则重新绑定 rowSelection 事件
+          console.log('this.rowSelection', this.rowSelection)
           props[k] = {
+            ...this.rowSelection,
             selectedRows: this.selectedRows,
             selectedRowKeys: this.selectedRowKeys,
             onChange: (selectedRowKeys, selectedRows) => {

+ 15 - 3
src/views/list/TableList.vue

@@ -84,6 +84,7 @@
       :data="loadData"
       :alert="options.alert"
       :rowSelection="options.rowSelection"
+      :show-pagination="false"
     >
       <span slot="serial" slot-scope="text, record, index">
         {{ index + 1 }}
@@ -91,6 +92,9 @@
       <span slot="status" slot-scope="text">
         <a-badge :status="text | statusTypeFilter" :text="text | statusFilter" />
       </span>
+      <span slot="description" slot-scope="text">
+        <ellipsis :length="4" tooltip>{{ text }}</ellipsis>
+      </span>
 
       <span slot="action" slot-scope="text, record">
         <template>
@@ -107,7 +111,7 @@
 
 <script>
 import moment from 'moment'
-import { STable } from '@/components'
+import { STable, Ellipsis } from '@/components'
 import StepByStepModal from './modules/StepByStepModal'
 import CreateForm from './modules/CreateForm'
 import { getRoleList, getServiceList } from '@/api/manage'
@@ -135,6 +139,7 @@ export default {
   name: 'TableList',
   components: {
     STable,
+    Ellipsis,
     CreateForm,
     StepByStepModal
   },
@@ -157,7 +162,8 @@ export default {
         },
         {
           title: '描述',
-          dataIndex: 'description'
+          dataIndex: 'description',
+          scopedSlots: { customRender: 'description' }
         },
         {
           title: '服务调用次数',
@@ -224,7 +230,13 @@ export default {
           alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
           rowSelection: {
             selectedRowKeys: this.selectedRowKeys,
-            onChange: this.onSelectChange
+            onChange: this.onSelectChange,
+            getCheckboxProps: record => ({
+              props: {
+                disabled: record.no === 'No 2', // Column configuration not to be checked
+                name: record.no
+              }
+            })
           }
         }
         this.optionAlertShow = true