【修改】JTable规范代码
This commit is contained in:
dusicong
@@ -1,28 +1,35 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 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> -->
|
||||
<span :slot="a.slots.title" v-for="a in aColumns" :key='a.dataIndex'>{{a.slots.title}}
|
||||
<a-table
|
||||
:columns="aColumns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ispagination"
|
||||
:rowSelection="rowSelect"
|
||||
bordered
|
||||
:scroll="{ x: 1920 }"
|
||||
>
|
||||
<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 class="ant-dropdown-link" @click="(e) => e.preventDefault()">
|
||||
<!-- 操作 -->
|
||||
<a-icon type="down" />
|
||||
</a>
|
||||
<a-menu slot="overlay">
|
||||
<a-sub-menu key="dj" 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
|
||||
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>
|
||||
@@ -39,162 +46,165 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
Table
|
||||
} from 'ant-design-vue'
|
||||
import { Table } from 'ant-design-vue'
|
||||
|
||||
export default {
|
||||
// TODO 命名和全局保持统一，应为JTable
|
||||
name: 'JTable',
|
||||
props: Object.assign({
|
||||
export default {
|
||||
// TODO 命名和全局保持统一，应为JTable
|
||||
name: 'JTable',
|
||||
props: Object.assign(
|
||||
{
|
||||
isShowPage: {
|
||||
type: Boolean,
|
||||
default () {
|
||||
default() {
|
||||
return true
|
||||
}
|
||||
},
|
||||
},
|
||||
isCheck: {
|
||||
type: Boolean,
|
||||
default () {
|
||||
default() {
|
||||
return true
|
||||
}
|
||||
},
|
||||
},
|
||||
}, Table.props, {
|
||||
},
|
||||
Table.props,
|
||||
{
|
||||
rowSelection: {
|
||||
type: Object,
|
||||
default () {
|
||||
default() {
|
||||
return {
|
||||
type: 'checkbox'
|
||||
type: 'checkbox',
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
pagination: {
|
||||
type: Object,
|
||||
default () {
|
||||
default() {
|
||||
return {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
showTotal: (total, range) => {
|
||||
return range[0] + "-" + range[1] + " 共" + total + "条"
|
||||
return range[0] + '-' + range[1] + ' 共' + total + '条'
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
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
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// console.log(this.aColumns)
|
||||
// 遍历出筛选列头的所有选项
|
||||
this.columns.forEach((item) => {
|
||||
this.plainOptions.push(item.dataIndex)
|
||||
})
|
||||
|
||||
// 读取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 initList = [] //最初始list
|
||||
let diffList = [] //两个数组不同
|
||||
// 首先遍历父组件传来的columns,拿到其中每一项的dataIndex,形成一个最初始的数组
|
||||
this.columns.forEach((item) => {
|
||||
initList.push(item.dataIndex)
|
||||
})
|
||||
// 拿到两个数组的不同的项
|
||||
diffList = this.getArrDifference(e, 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'
|
||||
}
|
||||
})
|
||||
} else if (e.target.value === 2) { //右侧冻结
|
||||
this.aColumns.find(item => {
|
||||
if (item.dataIndex === dataIndex) {
|
||||
item.fixed = 'right'
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.aColumns.find(item => { //解冻
|
||||
if (item.dataIndex === dataIndex) {
|
||||
item.fixed = false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
),
|
||||
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
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// console.log(this.aColumns)
|
||||
// 遍历出筛选列头的所有选项
|
||||
this.columns.forEach((item) => {
|
||||
this.plainOptions.push(item.dataIndex)
|
||||
})
|
||||
|
||||
// 读取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 initList = [] //最初始list
|
||||
let diffList = [] //两个数组不同
|
||||
// 首先遍历父组件传来的columns,拿到其中每一项的dataIndex,形成一个最初始的数组
|
||||
this.columns.forEach((item) => {
|
||||
initList.push(item.dataIndex)
|
||||
})
|
||||
// 拿到两个数组的不同的项
|
||||
diffList = this.getArrDifference(e, 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'
|
||||
}
|
||||
})
|
||||
} else if (e.target.value === 2) {
|
||||
//右侧冻结
|
||||
this.aColumns.find((item) => {
|
||||
if (item.dataIndex === dataIndex) {
|
||||
item.fixed = 'right'
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.aColumns.find((item) => {
|
||||
//解冻
|
||||
if (item.dataIndex === dataIndex) {
|
||||
item.fixed = false
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.ant-checkbox-group-item {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.ant-checkbox-group-item {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user