JeroBoot/base
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

【修改】JTable规范代码

Browse Source
This commit is contained in:
dusicong
2021-03-22 10:50:46 +08:00
parent 679aa8399c
commit 49bda883e8
3 changed files with 62 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
jero-web/src/components/table/jTable.vue
+38 -65
View File
@@ -1,6 +1,6 @@
<template>
<div>
<!-- TODO 使用标签 应每个参数一行，保持整体写法统一和美观度-->
<!-- TODO 使用标签 应每个参数一行，保持整体写法统一和美观度-->
<a-table :columns="aColumns" :dataSource="dataSource" :pagination="ispagination" :rowSelection="rowSelect" bordered
:scroll="{ x: 1920 }">
<!-- <a slot="name" slot-scope="text,scope">{{ scope.age }}</a> -->
@@ -13,7 +13,7 @@
<a-menu slot="overlay">
<a-sub-menu key="dj" title="冻结列头">
<a-menu-item>
<a-radio-group v-model="value" @change="((e)=>{fixedC(e,a.dataIndex)})">
<a-radio-group v-model="a.slots.fixedValue" @change="((e)=>{fixedChange(e,a.dataIndex)})">
<a-radio :style="radioStyle" :value="1">
左侧冻结
</a-radio>
@@ -45,7 +45,7 @@
export default {
// TODO 命名和全局保持统一，应为JTable
name: 'Jtable',
name: 'JTable',
props: Object.assign({
isShowPage: {
type: Boolean,
@@ -88,16 +88,8 @@
data() {
return {
aColumns: this.columns,
midColumns: this.columns,
checkedList: [],
plainOptions: [],
// TODO 未用到的变量请删掉
fixedList: [],
// TODO 初始化了，但未使用的变量请删掉
fixedOptions: [],
// TODO 代码中不要出现魔数，使用变量标明3的含义。实在无法处理的地方，最起码给个注释
value: 3,
radioStyle: {
display: 'block',
height: '30px',
@@ -122,78 +114,59 @@
},
},
mounted() {
console.log(this.aColumns)
// pList含义不清晰，无法理解
let pList = []
// console.log(this.aColumns)
// 遍历出筛选列头的所有选项
this.columns.forEach((item) => {
pList.push(item.dataIndex)
this.plainOptions.push(item.dataIndex)
})
this.plainOptions = pList
this.checkedList = pList
this.fixedOptions = pList
// 读取localStorage中的数据
var storageCloumns = JSON.parse(localStorage.getItem("pro__Cloumns"))
// console.log(storageCloumns)
if (storageCloumns) {
this.aColumns = storageCloumns
}
// 遍历出筛选列头中的已选项
this.aColumns.forEach((item) => {
this.checkedList.push(item.dataIndex)
})
},
methods: {
// 用户可自行筛选列头显示的字段
// TODO 该段代码复杂，建议逻辑复杂的代码，在方法名上注释清楚大致逻辑
onChange(e) {
let newList = [] //最初始list
let resList = [] //两个数组不同
let initList = [] //最初始list
let diffList = [] //两个数组不同
// 首先遍历父组件传来的columns,拿到其中每一项的dataIndex,形成一个最初始的数组
this.columns.forEach((item) => {
newList.push(item.dataIndex)
initList.push(item.dataIndex)
})
// TODO 不要在method里套function，可以考虑另开一个method函数，再进行调用
function getArrDifference(arr1, arr2) {
return arr1.concat(arr2).filter(function(v, i, arr) {
return arr.indexOf(v) === arr.lastIndexOf(v);
});
}
resList = getArrDifference(e, newList)
if (resList.length === 0) {
// 拿到两个数组的不同的项
diffList = this.getArrDifference(e, initList)
if (diffList.length === 0) {
// 如果数组为空，则把父组件传过来的表头赋值给
this.aColumns = this.columns
localStorage.setItem("pro__Cloumns", JSON.stringify(this.aColumns))
return
}
// TODO midColumns这个变量应该声明为局部变量，作为全局变量但没有全局使用是不合理的
for (let i = 0; i < resList.length; i++) {
this.midColumns = this.midColumns.filter(item =>
item.dataIndex !== resList[i]
let midColumns = this.columns
for (let i = 0; i < diffList.length; i++) {
midColumns = midColumns.filter(item =>
item.dataIndex !== diffList[i]
)
}
this.aColumns = this.midColumns
//重置
this.midColumns = this.columns
this.aColumns = midColumns
localStorage.setItem("pro__Cloumns", JSON.stringify(this.aColumns))
// console.log(JSON.parse(localStorage.getItem("pro__Cloumns")))
},
// 用户可自行冻结列头
// fixedChange(e) {
// //先判断有没有修改，
// if (e.length === 0) {
// this.aColumns.forEach((item) => {
// if (item.fixed) {
// item.fixed = false
// }
// })
// return
// }
// //清空所有fixed属性
// for (let i = 0; i < e.length; i++) {
// this.aColumns.forEach((item) => {
// if (item.fixed) {
// item.fixed = false
// }
// })
// }
// //把对应点击的fixed属性变为true
// for (let i = 0; i < e.length; i++) {
// this.aColumns.find(item => {
// if (item.dataIndex === e[i]) {
// item.fixed = true
// }
// })
// }
// },
fixedC(e, dataIndex) {
getArrDifference(arr1, arr2) {
return arr1.concat(arr2).filter(function(v, i, arr) {
return arr.indexOf(v) === arr.lastIndexOf(v);
});
},
fixedChange(e, dataIndex) {
// console.log(e.target.value, dataIndex)
if (e.target.value === 1) { //左侧冻结
this.aColumns.find(item => {
jero-web/src/config/router.config.js
+4
View File
@@ -359,6 +359,10 @@ export const constantRouterMap = [
}
]
},
{
path: '/jtable',
component: () => import(/* webpackChunkName: "fail" */ '@/views/jero/jtable1')
},
{
path: '/404',
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
jero-web/src/views/jero/jtable1.vue
+20 -20
View File
@@ -83,7 +83,12 @@
key: 'name',
width: 200,
slots: {
title: '姓名'
title: '姓名',
// 冻结列头的参数
// 1为左侧冻结
// 2为右侧冻结
// 3为不冻结或解冻
fixedValue: 3
}
},
{
@@ -92,7 +97,8 @@
key: 'age',
width: 200,
slots: {
title: '年龄'
title: '年龄',
fixedValue: 3
}
},
{
@@ -101,7 +107,8 @@
key: 'address',
width: 200,
slots: {
title: '住址'
title: '住址',
fixedValue: 3
}
},
{
@@ -110,7 +117,8 @@
key: 'address1',
width: 200,
slots: {
title: '住址1'
title: '住址1',
fixedValue: 3
}
},
{
@@ -119,7 +127,8 @@
key: 'address2',
width: 200,
slots: {
title: '住址2'
title: '住址2',
fixedValue: 3
}
},
{
@@ -128,7 +137,8 @@
key: 'address3',
width: 200,
slots: {
title: '住址3'
title: '住址3',
fixedValue: 3
}
},
{
@@ -137,7 +147,8 @@
key: 'address4',
width: 200,
slots: {
title: '住址4'
title: '住址4',
fixedValue: 3
}
},
{
@@ -145,22 +156,11 @@
dataIndex: 'address5',
key: 'address5',
slots: {
title: '住址5'
title: '住址5',
fixedValue: 3
}
},
],
// TODO 此处放分页组件的意义？分页组件不是通过参数去操控table组件来进行显隐吗
pagination: {
current: 1,
pageSize: 5,
pageSizeOptions: ['5', '10', '20'],
showTotal: (total, range) => {
return range[0] + "-" + range[1] + " 共" + total + "条"
},
showQuickJumper: true,
showSizeChanger: true,
total: 0
}
}
},
mounted() {