From a4f13e7731b3632ba4ca216a9921e8b48bd8f138 Mon Sep 17 00:00:00 2001 From: zer0Black Date: Fri, 26 Mar 2021 18:14:42 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90=E4=BF=AE=E6=94=B9=E3=80=91JTable?= =?UTF-8?q?=E7=9A=84=E4=BB=A3=E7=A0=81=E9=80=BB=E8=BE=91=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- jero-web/src/components/jero/JTable.vue | 109 +++++++++----------- jero-web/src/views/demo/list/JTableDemo.vue | 49 +++++---- 2 files changed, 81 insertions(+), 77 deletions(-) diff --git a/jero-web/src/components/jero/JTable.vue b/jero-web/src/components/jero/JTable.vue index f1d8407c..30eff57c 100644 --- a/jero-web/src/components/jero/JTable.vue +++ b/jero-web/src/components/jero/JTable.vue @@ -14,7 +14,7 @@ - {{ a.title }} + {{ a.slots.title }} @@ -53,55 +53,51 @@ import { Table } from 'ant-design-vue' export default { name: 'JTable', - props: Object.assign( - { - isShowPage: { - type: Boolean, - default() { - return true - }, - }, - isCheck: { - type: Boolean, - default() { - return true - }, - }, - isShowDropdown: { - type: Boolean, - default() { - return true - }, + props: { + ...Table.props, + isShowPage: { + type: Boolean, + default() { + return true }, }, - Table.props, - { - rowSelection: { - type: Object, - default() { - return { - type: 'checkbox', - } - }, + isCheck: { + type: Boolean, + default() { + return true }, - pagination: { - type: Object, - default() { - return { - current: 1, - pageSize: 10, - pageSizeOptions: ['10', '20', '30'], - showTotal: (total, range) => { - return range[0] + '-' + range[1] + ' 共' + total + '条' - }, - showQuickJumper: true, - showSizeChanger: true, - total: 0, - } - }, + }, + isShowDropdown: { + type: Boolean, + default() { + return true }, - } - ), + }, + rowSelection: { + type: Object, + default() { + return { + type: 'checkbox', + } + }, + }, + pagination: { + type: Object, + default() { + return { + current: 1, + pageSize: 10, + pageSizeOptions: ['10', '20', '30'], + showQuickJumper: true, + showSizeChanger: true, + total: 0, + showTotal: (total, range) => { + return range[0] + '-' + range[1] + ' 共' + total + '条' + } + } + }, + }, + }, data() { return { aColumns: this.columns, @@ -147,14 +143,11 @@ export default { } }, mounted() { - // console.log(this.aColumns) - // console.log(this.columns) - console.log(this.$attrs) // 遍历出筛选列头的所有选项 this.columns.forEach((item) => { let colItem = { - value: item.title, - label: item.title, + value: item.slots.title, + label: item.slots.title, disabled: false, } this.plainOptions.push(colItem) @@ -168,7 +161,7 @@ export default { } // 遍历出筛选列头中的已选项 this.aColumns.forEach((item) => { - this.checkedList.push(item.title) + this.checkedList.push(item.slots.title) }) }, methods: { @@ -193,7 +186,7 @@ export default { //转换为dataIndex for (let i = 0; i < e.length; i++) { this.columns.find((item) => { - if (item.title === e[i]) { + if (item.slots.title === e[i]) { trfList.push(item.dataIndex) } }) @@ -210,7 +203,6 @@ export default { localStorage.setItem('pro__Cloumns', JSON.stringify(this.aColumns)) return } - // TODO midColumns这个变量应该声明为局部变量，作为全局变量但没有全局使用是不合理的 let midColumns = this.columns for (let i = 0; i < diffList.length; i++) { midColumns = midColumns.filter((item) => item.dataIndex !== diffList[i]) @@ -218,7 +210,6 @@ export default { this.aColumns = midColumns localStorage.setItem('pro__Cloumns', JSON.stringify(this.aColumns)) - // console.log(JSON.parse(localStorage.getItem("pro__Cloumns"))) }, // 比较两个数组之间的不同,生成新数组 getArrDifference(arr1, arr2) { @@ -227,7 +218,11 @@ export default { }) }, fixedChange(e, dataIndex) { - // console.log(e.target.value, dataIndex) + // 冻结列头的参数 + // 1为左侧冻结 + // 2为右侧冻结 + // 3为不冻结或解冻 + if (e.target.value === 1) { //左侧冻结 this.aColumns.find((item) => { @@ -244,7 +239,6 @@ export default { } } this.aColumns.unshift(arr[0]) - // console.log(this.aColumns) } else if (e.target.value === 2) { //右侧冻结 this.aColumns.find((item) => { @@ -273,7 +267,6 @@ export default { }, // 列头重新排序 diffColunms() { - // console.log(dataIndex) let newColumnsList = [] //没有fixed属性的List let newFixedLeftList = [] //fixed=left的List let newFixedRightList = [] //fixed=right的List diff --git a/jero-web/src/views/demo/list/JTableDemo.vue b/jero-web/src/views/demo/list/JTableDemo.vue index 5e420eec..eb08e77f 100644 --- a/jero-web/src/views/demo/list/JTableDemo.vue +++ b/jero-web/src/views/demo/list/JTableDemo.vue @@ -2,15 +2,18 @@ - + - text: {{ text }}- record:{{ record }}- index:{{ index }} + + + @@ -30,6 +33,17 @@ export default { isShowPage: true, // 是否显示分页 isCheck: false, // 是否多选 isShowDropdown: true, //是否开启下拉功能 + pagination: { + current: 1, + pageSize: 100, + pageSizeOptions: ['100', '200', '300'], + showQuickJumper: true, + showSizeChanger: true, + total: 0, + showTotal: (total, range) => { + return range[0] + '-' + range[1] + ' 共' + total + '条' + } + }, dataSource: [ { key: '1', @@ -100,7 +114,7 @@ export default { ], columns: [ { - title: '姓名', + // title: '姓名', dataIndex: 'name', key: 1, width: 200, @@ -116,75 +130,72 @@ export default { }, { - title: '年龄', dataIndex: 'age', key: 2, width: 200, slots: { - // title: '年龄', + title: '年龄', fixedValue: 3, }, sorter: true, }, { - 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, }, }, @@ -195,7 +206,7 @@ export default { width: 500, slots: { // title: '操作', - fixedValue: 3, + fixedValue: 2, }, scopedSlots: { customRender: 'action' }, },