324 lines
9.1 KiB
Java
324 lines
9.1 KiB
Java
<template>
|
||
<div>
|
||
<!-- TODO 使用标签 应每个参数一行，保持整体写法统一和美观度-->
|
||
<a-table
|
||
:columns="aColumns"
|
||
:dataSource="dataSource"
|
||
:pagination="ispagination"
|
||
:rowSelection="rowSelect"
|
||
>
|
||
<span slot="action" slot-scope="text, record">
|
||
<a>Invite 一 {{ record.name }}</a>
|
||
<a-divider type="vertical" />
|
||
<a>Delete</a>
|
||
<a-divider type="vertical" />
|
||
<a class="ant-dropdown-link">
|
||
More actions
|
||
<a-icon type="down" />
|
||
</a>
|
||
</span>
|
||
<span :slot="a.slots.title" v-for="a in aColumns" :key="a.dataIndex">
|
||
{{ a.slots.title }}
|
||
<a-dropdown :trigger="['click']">
|
||
<a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
|
||
<!-- 操作 -->
|
||
<a-icon type="caret-down" v-if="isShowIcon" />
|
||
</a>
|
||
<a-menu slot="overlay">
|
||
<a-sub-menu key="frozen" title="冻结列头">
|
||
<a-menu-item>
|
||
<a-radio-group
|
||
v-model="a.slots.fixedValue"
|
||
@change="
|
||
(e) => {
|
||
fixedChange(e, a.dataIndex)
|
||
}
|
||
"
|
||
>
|
||
<a-radio :style="radioStyle" :value="1"> 左侧冻结 </a-radio>
|
||
<a-radio :style="radioStyle" :value="2"> 右侧冻结 </a-radio>
|
||
<a-radio :style="radioStyle" :value="3"> 解冻 </a-radio>
|
||
</a-radio-group>
|
||
</a-menu-item>
|
||
</a-sub-menu>
|
||
<a-sub-menu key="check" title="筛选列头">
|
||
<a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
|
||
</a-sub-menu>
|
||
</a-menu>
|
||
</a-dropdown>
|
||
</span>
|
||
</a-table>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { Table } from 'ant-design-vue'
|
||
|
||
export default {
|
||
// TODO 命名和全局保持统一，应为JTable
|
||
name: 'JTable',
|
||
props: Object.assign(
|
||
{
|
||
isShowPage: {
|
||
type: Boolean,
|
||
default() {
|
||
return true
|
||
},
|
||
},
|
||
isCheck: {
|
||
type: Boolean,
|
||
default() {
|
||
return true
|
||
},
|
||
},
|
||
isShowDropdown: {
|
||
type: Boolean,
|
||
default() {
|
||
return true
|
||
},
|
||
},
|
||
},
|
||
Table.props,
|
||
{
|
||
rowSelection: {
|
||
type: Object,
|
||
default() {
|
||
return {
|
||
type: 'checkbox',
|
||
}
|
||
},
|
||
},
|
||
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,
|
||
}
|
||
},
|
||
},
|
||
}
|
||
),
|
||
data() {
|
||
return {
|
||
aColumns: this.columns,
|
||
checkedList: [],
|
||
plainOptions: [],
|
||
radioStyle: {
|
||
display: 'block',
|
||
height: '30px',
|
||
lineHeight: '30px',
|
||
},
|
||
}
|
||
},
|
||
computed: {
|
||
rowSelect() {
|
||
if (this.isCheck) {
|
||
return this.rowSelection
|
||
} else {
|
||
return null
|
||
}
|
||
},
|
||
ispagination() {
|
||
if (this.isShowPage) {
|
||
return this.pagination
|
||
} else {
|
||
return false
|
||
}
|
||
},
|
||
isShowIcon() {
|
||
if (this.isShowDropdown) {
|
||
return true
|
||
} else {
|
||
return false
|
||
}
|
||
},
|
||
},
|
||
mounted() {
|
||
// console.log(this.aColumns)
|
||
// 遍历出筛选列头的所有选项
|
||
this.columns.forEach((item) => {
|
||
let colItem = {
|
||
value: item.slots.title,
|
||
label: item.slots.title,
|
||
disabled: false,
|
||
}
|
||
this.plainOptions.push(colItem)
|
||
})
|
||
|
||
// 读取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.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(trfList, initList)
|
||
if (diffList.length === 0) {
|
||
// 如果数组为空，则把父组件传过来的表头赋值给
|
||
this.aColumns = this.columns
|
||
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])
|
||
}
|
||
this.aColumns = midColumns
|
||
|
||
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)
|
||
})
|
||
},
|
||
fixedChange(e, dataIndex) {
|
||
// console.log(e.target.value, dataIndex)
|
||
if (e.target.value === 1) {
|
||
//左侧冻结
|
||
this.aColumns.find((item) => {
|
||
if (item.dataIndex === dataIndex) {
|
||
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) => {
|
||
if (item.dataIndex === dataIndex) {
|
||
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) => {
|
||
//解冻
|
||
if (item.dataIndex === dataIndex) {
|
||
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]
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.ant-dropdown-menu-submenu-popup {
|
||
width: 7.5rem;
|
||
}
|
||
|
||
.ant-checkbox-group-item {
|
||
line-height: 30px;
|
||
padding-left: 15px;
|
||
display: -webkit-box;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
/* autoprefixer: off */
|
||
-webkit-box-orient: vertical;
|
||
-moz-box-orient: vertical;
|
||
/* autoprefixer: on */
|
||
-webkit-line-clamp: 1;
|
||
word-wrap: break-word;
|
||
word-break: break-all;
|
||
}
|
||
</style>
|