fix: 修复ProTable tableParmas bug @0.8.3-4

BoBoooooo · Jan 22, 2021 · 1264c32 · 1264c32
1 parent fa762e6
commit 1264c32
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 23 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-pro-crud",
-  "version": "0.8.3-3",
+  "version": "0.8.3-4",
   "main": "lib/ProCrud.umd.min.js",
   "files": [
     "lib",

diff --git a/src/component/crud-table/src/CrudTable.vue b/src/component/crud-table/src/CrudTable.vue
@@ -22,6 +22,7 @@
                 :visibleList="view"
                 :columns="tableConfig"
                 :request="request"
+                :tableParams="tableParams"
                 :lazy="lazy"
                 :load="treeload"
                 :tree-props="{children: 'children', hasChildren: 'flag'}">

diff --git a/src/demo/component/PersonCrudTable.vue b/src/demo/component/PersonCrudTable.vue
@@ -7,7 +7,7 @@
 
 <template>
   <div class="page-container">
-    <CrudTable ref="table" tableName="person" tableTitle="员工管理" fullHeight orderCondition="timestamp desc" :visibleList="visibleList" v-bind="$attrs" v-on="$listeners">
+    <CrudTable ref="table" tableName="person" tableTitle="员工管理" fullHeight orderCondition="timestamp desc" :tableParams="tableParams" :visibleList="visibleList" v-bind="$attrs" v-on="$listeners">
       <template #columnFormatter="{row,prop}">
         <el-tag v-if="prop === 'jobno'">{{ row.jobno }}</el-tag>
         <span v-if="prop === 'personname'"><i class="el-icon el-icon-user" style="color: red"></i>{{ row.personname }}</span>
@@ -17,15 +17,10 @@
 </template>
 
 <script>
-import CrudTable from '@/component/crud-table/src/CrudTable.vue';
-import { DML } from '@/types/common';
 import { Vue, Component, Prop } from 'vue-property-decorator';
 
 @Component({
   name: 'PersonTable',
-  components: {
-    CrudTable,
-  },
 })
 export default class PersonTable extends Vue {
   @Prop(Object)

diff --git a/src/demo/component/PersonProTable.vue b/src/demo/component/PersonProTable.vue
@@ -7,7 +7,7 @@
 
 <template>
   <div class="page-container">
-    <ProTable ref="table" :request="request" tableTitle="员工管理" fullHeight orderCondition="timestamp desc" :visibleList="visibleList" v-bind="$attrs" v-on="$listeners">
+    <ProTable ref="table" :request="request" :columns="columns" tableTitle="员工管理" fullHeight orderCondition="timestamp desc"  v-bind="$attrs" v-on="$listeners">
       <template #columnFormatter="{row,prop}">
         <el-tag v-if="prop === 'jobno'">{{ row.jobno }}</el-tag>
         <span v-if="prop === 'personname'"><i class="el-icon el-icon-user" style="color: red"></i>{{ row.personname }}</span>
@@ -17,26 +17,95 @@
 </template>
 
 <script>
-import CrudTable from '@/component/crud-table/src/CrudTable.vue';
 import { DML } from '@/types/common';
 import { Vue, Component, Prop } from 'vue-property-decorator';
 
 @Component({
-  name: 'PersonTable',
-  components: {
-    CrudTable,
-  },
+  name: 'PersonProTable',
 })
-export default class PersonTable extends Vue {
-  @Prop(Object)
-  visibleList;
+export default class PersonProTable extends Vue {
+   columns = {
+     name: 'person',
+     position: '人员信息列表',
+     columns: [{
+       prop: 'jobno',
+       label: '工号',
+       minWidth: 140,
+       align: 'center',
+       headerAlign: 'center',
+       showOverflowTooltip: true,
+       sortable: 'custom',
+       slotName: '',
+       searchable: true,
+     }, {
+       prop: 'personname',
+       label: '姓名',
+       minWidth: 140,
+       align: 'center',
+       headerAlign: 'center',
+       showOverflowTooltip: true,
+       sortable: 'custom',
+       slotName: '',
+       searchable: true,
+     }, {
+       prop: 'jobtime',
+       label: '入职时间',
+       minWidth: 140,
+       align: 'center',
+       headerAlign: 'center',
+       showOverflowTooltip: true,
+       sortable: 'custom',
+       slotName: '',
+       searchable: true,
+     }, {
+       prop: 'deptname',
+       label: '所在部门',
+       minWidth: 140,
+       align: 'center',
+       headerAlign: 'center',
+       showOverflowTooltip: true,
+       sortable: 'custom',
+       slotName: '',
+       searchable: true,
+     }, {
+       prop: 'post',
+       label: '岗位',
+       minWidth: 140,
+       align: 'center',
+       headerAlign: 'center',
+       showOverflowTooltip: true,
+       sortable: 'custom',
+       slotName: '',
+       searchable: true,
+     }, {
+       prop: 'level',
+       label: '职级',
+       minWidth: 140,
+       align: 'center',
+       headerAlign: 'center',
+       showOverflowTooltip: true,
+       sortable: 'custom',
+       slotName: '',
+       searchable: true,
+     }, {
+       prop: 'mobile',
+       label: '联系方式',
+       minWidth: 140,
+       align: 'center',
+       headerAlign: 'center',
+       showOverflowTooltip: true,
+       sortable: 'custom',
+       slotName: '',
+       searchable: true,
+     }],
+   }
 
-  async request(axiosParams) {
-    const res = await this.$PROCRUD.crud(DML.SELECT, 'person', axiosParams);
-    return {
-      data: res.data.list,
-      total: res.total,
-    };
-  }
+   async request(axiosParams) {
+     const res = await this.$PROCRUD.crud(DML.SELECT, 'person', axiosParams);
+     return {
+       data: res.data.list,
+       total: res.total,
+     };
+   }
 }
 </script>