【新增】j-table
This commit is contained in:
dusicong
@@ -0,0 +1,218 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<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-dropdown :trigger="['click']">
|
||||||
|
<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="value" @change="((e)=>{fixedC(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="sx" title="筛选列头">
|
||||||
|
<a-menu-item>
|
||||||
|
<a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
|
||||||
|
</a-menu-item>
|
||||||
|
</a-sub-menu>
|
||||||
|
</a-menu>
|
||||||
|
</a-dropdown>
|
||||||
|
</span>
|
||||||
|
</a-table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
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
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}, 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,
|
||||||
|
midColumns: this.columns,
|
||||||
|
checkedList: [],
|
||||||
|
plainOptions: [],
|
||||||
|
|
||||||
|
fixedList: [],
|
||||||
|
fixedOptions: [],
|
||||||
|
value: 3,
|
||||||
|
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)
|
||||||
|
let pList = []
|
||||||
|
this.columns.forEach((item) => {
|
||||||
|
pList.push(item.dataIndex)
|
||||||
|
})
|
||||||
|
this.plainOptions = pList
|
||||||
|
this.checkedList = pList
|
||||||
|
|
||||||
|
this.fixedOptions = pList
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 用户可自行筛选列头显示的字段
|
||||||
|
onChange(e) {
|
||||||
|
let newList = [] //最初始list
|
||||||
|
let resList = [] //两个数组不同
|
||||||
|
this.columns.forEach((item) => {
|
||||||
|
newList.push(item.dataIndex)
|
||||||
|
})
|
||||||
|
|
||||||
|
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) {
|
||||||
|
// 如果数组为空，则把父组件传过来的表头赋值给
|
||||||
|
this.aColumns = this.columns
|
||||||
|
return
|
||||||
|
}
|
||||||
|
for (let i = 0; i < resList.length; i++) {
|
||||||
|
this.midColumns = this.midColumns.filter(item =>
|
||||||
|
item.dataIndex !== resList[i]
|
||||||
|
)
|
||||||
|
}
|
||||||
|
this.aColumns = this.midColumns
|
||||||
|
//重置
|
||||||
|
this.midColumns = this.columns
|
||||||
|
},
|
||||||
|
// 用户可自行冻结列头
|
||||||
|
// 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) {
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,179 @@
|
|||||||
|
<template>
|
||||||
|
<a-card :bordered="false">
|
||||||
|
<j-table :isShowPage="isShowPage" :isCheck="isCheck" :dataSource="dataSource" :columns="columns"></j-table>
|
||||||
|
</a-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import JTable from '@/components/table/jTable'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Jtable',
|
||||||
|
components: {
|
||||||
|
JTable
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isShowPage: true, // 是否显示分页
|
||||||
|
isCheck: false, // 是否多选
|
||||||
|
dataSource: [{
|
||||||
|
key: '1',
|
||||||
|
name: '胡彦斌',
|
||||||
|
age: 32,
|
||||||
|
address: '西湖区湖底公园1号',
|
||||||
|
address1: '西湖区湖底公园1号',
|
||||||
|
address2: '西湖区湖底公园1号',
|
||||||
|
address3: '西湖区湖底公园1号',
|
||||||
|
address4: '西湖区湖底公园1号',
|
||||||
|
address5: '西湖区湖底公园1号',
|
||||||
|
}, {
|
||||||
|
key: '2',
|
||||||
|
name: '胡彦斌',
|
||||||
|
age: 32,
|
||||||
|
address: '西湖区湖底公园1号',
|
||||||
|
address1: '西湖区湖底公园1号',
|
||||||
|
address2: '西湖区湖底公园1号',
|
||||||
|
address3: '西湖区湖底公园1号',
|
||||||
|
address4: '西湖区湖底公园1号',
|
||||||
|
address5: '西湖区湖底公园1号',
|
||||||
|
}, {
|
||||||
|
key: '3',
|
||||||
|
name: '胡彦斌',
|
||||||
|
age: 32,
|
||||||
|
address: '西湖区湖底公园1号',
|
||||||
|
address1: '西湖区湖底公园1号',
|
||||||
|
address2: '西湖区湖底公园1号',
|
||||||
|
address3: '西湖区湖底公园1号',
|
||||||
|
address4: '西湖区湖底公园1号',
|
||||||
|
address5: '西湖区湖底公园1号',
|
||||||
|
}, {
|
||||||
|
key: '4',
|
||||||
|
name: '胡彦斌',
|
||||||
|
age: 32,
|
||||||
|
address: '西湖区湖底公园1号',
|
||||||
|
address1: '西湖区湖底公园1号',
|
||||||
|
address2: '西湖区湖底公园1号',
|
||||||
|
address3: '西湖区湖底公园1号',
|
||||||
|
address4: '西湖区湖底公园1号',
|
||||||
|
address5: '西湖区湖底公园1号',
|
||||||
|
}, {
|
||||||
|
key: '5',
|
||||||
|
name: '胡彦斌',
|
||||||
|
age: 32,
|
||||||
|
address: '西湖区湖底公园1号',
|
||||||
|
address1: '西湖区湖底公园1号',
|
||||||
|
address2: '西湖区湖底公园1号',
|
||||||
|
address3: '西湖区湖底公园1号',
|
||||||
|
address4: '西湖区湖底公园1号',
|
||||||
|
address5: '西湖区湖底公园1号',
|
||||||
|
}, {
|
||||||
|
key: '6',
|
||||||
|
name: '胡彦斌',
|
||||||
|
age: 32,
|
||||||
|
address: '西湖区湖底公园1号',
|
||||||
|
address1: '西湖区湖底公园1号',
|
||||||
|
address2: '西湖区湖底公园1号',
|
||||||
|
address3: '西湖区湖底公园1号',
|
||||||
|
address4: '西湖区湖底公园1号',
|
||||||
|
address5: '西湖区湖底公园1号',
|
||||||
|
}],
|
||||||
|
columns: [{
|
||||||
|
// title: '姓名',
|
||||||
|
dataIndex: 'name',
|
||||||
|
key: 'name',
|
||||||
|
width: 200,
|
||||||
|
slots: {
|
||||||
|
title: '姓名'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// title: '年龄',
|
||||||
|
dataIndex: 'age',
|
||||||
|
key: 'age',
|
||||||
|
width: 200,
|
||||||
|
slots: {
|
||||||
|
title: '年龄'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// title: '住址',
|
||||||
|
dataIndex: 'address',
|
||||||
|
key: 'address',
|
||||||
|
width: 200,
|
||||||
|
slots: {
|
||||||
|
title: '住址'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// title: '住址1',
|
||||||
|
dataIndex: 'address1',
|
||||||
|
key: 'address1',
|
||||||
|
width: 200,
|
||||||
|
slots: {
|
||||||
|
title: '住址1'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// title: '住址2',
|
||||||
|
dataIndex: 'address2',
|
||||||
|
key: 'address2',
|
||||||
|
width: 200,
|
||||||
|
slots: {
|
||||||
|
title: '住址2'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// title: '住址3',
|
||||||
|
dataIndex: 'address3',
|
||||||
|
key: 'address3',
|
||||||
|
width: 200,
|
||||||
|
slots: {
|
||||||
|
title: '住址3'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// title: '住址4',
|
||||||
|
dataIndex: 'address4',
|
||||||
|
key: 'address4',
|
||||||
|
width: 200,
|
||||||
|
slots: {
|
||||||
|
title: '住址4'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// title: '住址5',
|
||||||
|
dataIndex: 'address5',
|
||||||
|
key: 'address5',
|
||||||
|
slots: {
|
||||||
|
title: '住址5'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
],
|
||||||
|
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() {
|
||||||
|
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user