diff --git a/jero-web/package-lock.json b/jero-web/package-lock.json
index 3e8c9d69..91414538 100644
--- a/jero-web/package-lock.json
+++ b/jero-web/package-lock.json
@@ -14534,9 +14534,9 @@
}
},
"sortablejs": {
- "version": "1.10.2",
- "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
- "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
+ "version": "1.13.0",
+ "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.13.0.tgz",
+ "integrity": "sha512-RBJirPY0spWCrU5yCmWM1eFs/XgX2J5c6b275/YyxFRgnzPhKl/TDeU2hNR8Dt7ITq66NRPM4UlOt+e5O4CFHg=="
},
"source-list-map": {
"version": "2.0.1",
@@ -16516,6 +16516,13 @@
"integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
"requires": {
"sortablejs": "1.10.2"
+ },
+ "dependencies": {
+ "sortablejs": {
+ "version": "1.10.2",
+ "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
+ "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
+ }
}
},
"vuex": {
diff --git a/jero-web/src/components/table/jTable.vue b/jero-web/src/components/table/jTable.vue
index 41d0a6e4..bed737c1 100644
--- a/jero-web/src/components/table/jTable.vue
+++ b/jero-web/src/components/table/jTable.vue
@@ -14,10 +14,10 @@
-
+
-
+
-
-
-
-
+
+
@@ -65,6 +68,12 @@ export default {
return true
},
},
+ isShowDropdown: {
+ type: Boolean,
+ default() {
+ return true
+ },
+ },
},
Table.props,
{
@@ -104,6 +113,10 @@ export default {
height: '30px',
lineHeight: '30px',
},
+ checkboxStyle: {
+ display: 'block',
+ lineHeight: '30px',
+ },
}
},
computed: {
@@ -121,12 +134,24 @@ export default {
return false
}
},
+ isShowIcon() {
+ if (this.isShowDropdown) {
+ return true
+ } else {
+ return false
+ }
+ },
},
mounted() {
// console.log(this.aColumns)
// 遍历出筛选列头的所有选项
this.columns.forEach((item) => {
- this.plainOptions.push(item.dataIndex)
+ let colItem = {
+ value: item.slots.title,
+ label: item.slots.title,
+ disabled: false,
+ }
+ this.plainOptions.push(colItem)
})
// 读取localStorage中的数据
@@ -137,21 +162,43 @@ export default {
}
// 遍历出筛选列头中的已选项
this.aColumns.forEach((item) => {
- this.checkedList.push(item.dataIndex)
+ this.checkedList.push(item.slots.title)
})
},
methods: {
// 用户可自行筛选列头显示的字段
// TODO 该段代码复杂，建议逻辑复杂的代码，在方法名上注释清楚大致逻辑
onChange(e) {
+ // 只剩一个时候,最后一个多选按钮禁用
+ if (this.checkedList.length === 1) {
+ this.plainOptions.forEach((item) => {
+ if (item.label === this.checkedList[0]) {
+ item.disabled = true
+ }
+ })
+ } else {
+ this.plainOptions.forEach((item) => {
+ item.disabled = false
+ })
+ }
+
+ let trfList = [] //将中文转换为dataIndex
let initList = [] //最初始list
let diffList = [] //两个数组不同
+ //转换为dataIndex
+ for (let i = 0; i < e.length; i++) {
+ this.columns.find((item) => {
+ if (item.slots.title === e[i]) {
+ trfList.push(item.dataIndex)
+ }
+ })
+ }
// 首先遍历父组件传来的columns,拿到其中每一项的dataIndex,形成一个最初始的数组
this.columns.forEach((item) => {
initList.push(item.dataIndex)
})
// 拿到两个数组的不同的项
- diffList = this.getArrDifference(e, initList)
+ diffList = this.getArrDifference(trfList, initList)
if (diffList.length === 0) {
// 如果数组为空，则把父组件传过来的表头赋值给
this.aColumns = this.columns
@@ -168,6 +215,7 @@ export default {
localStorage.setItem('pro__Cloumns', JSON.stringify(this.aColumns))
// console.log(JSON.parse(localStorage.getItem("pro__Cloumns")))
},
+ // 比较两个数组之间的不同,生成新数组
getArrDifference(arr1, arr2) {
return arr1.concat(arr2).filter(function (v, i, arr) {
return arr.indexOf(v) === arr.lastIndexOf(v)
@@ -182,6 +230,16 @@ export default {
item.fixed = 'left'
}
})
+ // 左侧冻结,先把冻结项删除,再unshift到数组首位
+ let arr
+ for (let i = 0; i < this.aColumns.length; i++) {
+ if (this.aColumns[i].dataIndex === dataIndex) {
+ arr = this.aColumns.splice(i, 1)
+ break
+ }
+ }
+ this.aColumns.unshift(arr[0])
+ // console.log(this.aColumns)
} else if (e.target.value === 2) {
//右侧冻结
this.aColumns.find((item) => {
@@ -189,6 +247,15 @@ export default {
item.fixed = 'right'
}
})
+ // 右侧冻结,先把冻结项删除,再push到数组末位
+ let arr
+ for (let i = 0; i < this.aColumns.length; i++) {
+ if (this.aColumns[i].dataIndex === dataIndex) {
+ arr = this.aColumns.splice(i, 1)
+ break
+ }
+ }
+ this.aColumns.push(arr[0])
} else {
this.aColumns.find((item) => {
//解冻
@@ -196,15 +263,47 @@ export default {
item.fixed = false
}
})
+ this.diffColunms()
}
},
+ // 列头重新排序
+ diffColunms() {
+ // console.log(dataIndex)
+ let newColumnsList = [] //没有fixed属性的List
+ let newFixedLeftList = [] //fixed=left的List
+ let newFixedRightList = [] //fixed=right的List
+ this.aColumns.forEach((item) => {
+ if (!item.fixed) {
+ newColumnsList.push(item)
+ }
+ })
+ this.aColumns.forEach((item) => {
+ if (item.fixed === 'left') {
+ newFixedLeftList.push(item)
+ }
+ })
+ this.aColumns.forEach((item) => {
+ if (item.fixed === 'right') {
+ newFixedRightList.push(item)
+ }
+ })
+ // 冒泡排序,根据key重新排序
+ for (var i = 0; i < newColumnsList.length - 1; i++) {
+ for (var j = 0; j < newColumnsList.length - 1 - i; j++) {
+ if (newColumnsList[j].key > newColumnsList[j + 1].key) {
+ ;[newColumnsList[j], newColumnsList[j + 1]] = [newColumnsList[j + 1], newColumnsList[j]]
+ }
+ }
+ }
+ // 解构赋值,重新定义列头List
+ this.aColumns = [...[...newFixedLeftList, ...newColumnsList], ...newFixedRightList]
+ },
},
}
diff --git a/jero-web/src/views/jero/jtable1.vue b/jero-web/src/views/jero/jtable1.vue
index 659e5ad0..bc81d5ce 100644
--- a/jero-web/src/views/jero/jtable1.vue
+++ b/jero-web/src/views/jero/jtable1.vue
@@ -1,6 +1,8 @@
-
+
+
@@ -16,10 +18,11 @@
return {
isShowPage: true, // 是否显示分页
isCheck: false, // 是否多选
+ isShowDropdown: true, //是否开启下拉功能
dataSource: [{
key: '1',
- name: '胡彦斌',
- age: 32,
+ name: '胡彦斌1',
+ age: 35,
address: '西湖区湖底公园1号',
address1: '西湖区湖底公园1号',
address2: '西湖区湖底公园1号',
@@ -28,9 +31,9 @@
address5: '西湖区湖底公园1号',
}, {
key: '2',
- name: '胡彦斌',
+ name: '胡彦斌2',
age: 32,
- address: '西湖区湖底公园1号',
+ address: '西湖区湖底公园3号',
address1: '西湖区湖底公园1号',
address2: '西湖区湖底公园1号',
address3: '西湖区湖底公园1号',
@@ -38,9 +41,9 @@
address5: '西湖区湖底公园1号',
}, {
key: '3',
- name: '胡彦斌',
+ name: '胡彦斌3',
age: 32,
- address: '西湖区湖底公园1号',
+ address: '西湖区湖底公园5号',
address1: '西湖区湖底公园1号',
address2: '西湖区湖底公园1号',
address3: '西湖区湖底公园1号',
@@ -48,9 +51,9 @@
address5: '西湖区湖底公园1号',
}, {
key: '4',
- name: '胡彦斌',
+ name: '胡彦斌4',
age: 32,
- address: '西湖区湖底公园1号',
+ address: '西湖区湖底公园7号',
address1: '西湖区湖底公园1号',
address2: '西湖区湖底公园1号',
address3: '西湖区湖底公园1号',
@@ -58,9 +61,9 @@
address5: '西湖区湖底公园1号',
}, {
key: '5',
- name: '胡彦斌',
- age: 32,
- address: '西湖区湖底公园1号',
+ name: '胡彦斌5',
+ age: 38,
+ address: '西湖区湖底公园9号',
address1: '西湖区湖底公园1号',
address2: '西湖区湖底公园1号',
address3: '西湖区湖底公园1号',
@@ -68,9 +71,9 @@
address5: '西湖区湖底公园1号',
}, {
key: '6',
- name: '胡彦斌',
+ name: '胡彦斌6',
age: 32,
- address: '西湖区湖底公园1号',
+ address: '西湖区湖底公园11号',
address1: '西湖区湖底公园1号',
address2: '西湖区湖底公园1号',
address3: '西湖区湖底公园1号',
@@ -80,7 +83,7 @@
columns: [{
// title: '姓名',
dataIndex: 'name',
- key: 'name',
+ key: 1,
width: 200,
slots: {
title: '姓名',
@@ -89,32 +92,35 @@
// 2为右侧冻结
// 3为不冻结或解冻
fixedValue: 3
- }
+ },
+ // fixed: 'right'
},
{
// title: '年龄',
dataIndex: 'age',
- key: 'age',
+ key: 2,
width: 200,
slots: {
title: '年龄',
fixedValue: 3
- }
+ },
+ // sorter: (a, b) => a.age - b.age,
},
{
// title: '住址',
dataIndex: 'address',
- key: 'address',
+ key: 3,
width: 200,
slots: {
title: '住址',
fixedValue: 3
- }
+ },
+ // sorter: (a, b) => a.address.length - b.address.length,
},
{
// title: '住址1',
dataIndex: 'address1',
- key: 'address1',
+ key: 4,
width: 200,
slots: {
title: '住址1',
@@ -124,7 +130,7 @@
{
// title: '住址2',
dataIndex: 'address2',
- key: 'address2',
+ key: 5,
width: 200,
slots: {
title: '住址2',
@@ -134,7 +140,7 @@
{
// title: '住址3',
dataIndex: 'address3',
- key: 'address3',
+ key: 6,
width: 200,
slots: {
title: '住址3',
@@ -144,7 +150,7 @@
{
// title: '住址4',
dataIndex: 'address4',
- key: 'address4',
+ key: 7,
width: 200,
slots: {
title: '住址4',
@@ -154,7 +160,7 @@
{
// title: '住址5',
dataIndex: 'address5',
- key: 'address5',
+ key: 8,
slots: {
title: '住址5',
fixedValue: 3