vue使用ant design tree树形控件搜索功能及配合表格动态隐藏列数据
vue 使用ant design表格动态列
·
效果展示
项目中有时会用到表格动态列的功能,在使用ant design时发现并没有这个功能,而列显隐的功能用到的及较多,所以就只能自己封装下。
子页面:
<template>
<a-drawer :visible="visible" width="30%" @close="close" :drawerStyle="{background:'#06347f'}" :closable="false">
<div class="person">
<div style="width: 100%; padding: 10px margin-top:20px;">
<a-input-search v-model="searchStr" placeholder="输⼊搜选项" style="width: 100%" @search="onSearch"></a-input-search>
</div>
<!-- selectedKeys是选中项key的集合,expandedKeys是展开项key的集合-->
<a-tree v-if="treeData.length" :checkedKeys="checkedKeys" :treeData="treeData" checkable :selectable="false"
:selectedKeys="selectedKeys" :expandedKeys="expandedKeys" @expand="onExpand" :autoExpandParent="autoExpandParent"
@select="onSelect" @check="onCheck" class="person-tree" show-line>
<template slot="name" slot-scope="{ name }">
<span v-html="name.replace(new RegExp(searchValue,'g'),'<span style=color:#f50>'+searchValue+'</span>')"></span>
</template>
</a-tree>
</div>
</a-drawer>
</template>
<script>
export default {
props:{
visible:{
type:Boolean,
default:false
},
columns:{
type:Array,
default:Array
},
},
data(){
return{
expandedKeys: [],
backupsExpandedKeys: [],
autoExpandParent: false,
checkedKeys: [],
selectedKeys: [],
searchValue: '',
treeData: [],
searchStr: '',
column:[]
}
},
created(){
this.getTreeData()
},
methods:{
getTreeData(){
this.column=this.columns
let data=[{
name: '数据列显隐',
key: '0-0',
scopedSlots: { title: 'name' },
children: []
}]
this.columns.forEach(item=>{
if(item.title && item.key){
data[0].children.push({name:item.title,key:item.key,scopedSlots:{title:'name'}})
this.checkedKeys.push(item.key)
this.selectedKeys.push(item.key)
}
})
this.treeData=data
},
onSearch () {
this.searchValue = this.searchStr
if (this.searchValue === '') {
this.expandedKeys = []
} else {
this.expandedKeys = []
this.backupsExpandedKeys = []
const candidateKeysList = this.getkeyList(this.searchValue,this.treeData,[])
candidateKeysList.forEach((item) => {
const key = this.getParentKey(item, this.treeData)
// eslint-disable-next-line no-shadow
if (key && !this.backupsExpandedKeys.some((item) => item === key)) this.backupsExpandedKeys.push(key)
})
const { length } = this.backupsExpandedKeys
// eslint-disable-next-line no-plusplus
for (let i = 0; i < length; i++) {
this.getAllParentKey(this.backupsExpandedKeys[i],this.treeData)
}
this.expandedKeys = this.backupsExpandedKeys.slice()
}
},
getkeyList (value, tree, keyList) {
// eslint-disable-next-line no-plusplus
for (let i = 0; i < tree.length; i++) {
const node = tree[i]
if (node.name.indexOf(value) > -1) {
keyList.push(node.key)
}
if (node.children) {
this.getkeyList(value, node.children, keyList)
}
}
return keyList
},
getParentKey (key, tree) {
let parentKey
let temp
// eslint-disable-next-line no-plusplus
for (let i = 0; i < tree.length; i++) {
const node = tree[i]
if (node.children) {
if (node.children.some((item) => item.key === key)) {
parentKey = node.key
// eslint-disable-next-line no-cond-assign
} else if((temp = this.getParentKey(key, node.children))){
parentKey = temp
}
}
}
return parentKey
},
getAllParentKey (key, tree) {
let parentKey
if (key) {
parentKey = this.getParentKey(key, tree)
if (parentKey) {
if (!this.backupsExpandedKeys.some((item) => item === parentKey)) {
this.backupsExpandedKeys.push(parentKey)
}
this.getAllParentKey(parentKey, tree)
}
}
},
onExpand (expandedKeys) {
this.expandedKeys = expandedKeys
this.autoExpandParent = false
},
onCheck (checkedKeys,e) {
let nodes=e.checkedNodes
let names=[]
this.column.forEach(item=>{
for (var i in nodes) {
let info=nodes[i].data.props.dataRef
if(item.key==info.key){
names.push(item)
}
}
})
this.checkedKeys = checkedKeys
this.tableProps(names)
},
onSelect (selectedKeys, e) {
let nodes=e.checkedNodes
let names=[]
this.column.forEach(item=>{
for (var i in nodes) {
let info=nodes[i].data.props.dataRef
if(item.key==info.key){
names.push(item)
}
}
})
this.selectedKeys = selectedKeys
this.tableProps(names)
},
tableProps(names){
let column=names
column.unshift({title:'序号',width:80,align:'center',scopedSlots:{customRender:'index'}})
column.push({title:'操作',width:300,align:'center',scopedSlots:{customRender:'action'}})
this.$emit('close',column)
},
close(){
this.$emit('close')
}
}
}
</script>
<style lang="scss" scope>
.person {
width: 100%;
background: #06347f;
overflow: hidden;
.ant-input {
background: #06347f;
border: 1px solid #08a7fd;
color: #fff;
}
.ant-input-search {
.ant-input-search-icon {
color: #fff;
}
}
.person-tree {
color: #00adff;
.ant-tree-title {
color: #00adff;
}
.ant-tree-checkbox-inner {
background-color: transparent;
border-color: #00adff;
}
}
li.ant-tree-treenode-disabled > .ant-tree-node-content-wrapper span {
color: #00adff;
}
.ant-tree li .ant-tree-node-content-wrapper {
width: calc(100%-24px);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #00adff;
}
.ant-tree.ant-tree-show-line li span.ant-tree-switcher {
color: #00adff;
background: rgba(0, 60, 117, 1);
}
.ant-tree.ant-tree-show-line li:not(:last-child)::before {
border-left: 1px dashed #00adff;
top: 6px;
height: calc(90%);
}
}
</style>
默认拿到table表格columns配置的数据,其中序号列和操作列不进行动态显隐,如果需要请自行配置
父页面:
剩下的就是在需要的页面引入该功能就可以了
<template>
<div>
<div class="btn-top">
<div class="btn-top-left"><a-button type="primary" icon="plus">新增</a-button></div>
<div class="btn-top-right"><a-button shape="circle" icon="unordered-list" @click="visible=!visible"></a-button></div>
</div>
<a-table :columns="columns" :data-source="dataList">
<template slot="index" slot-scope="text,record,index">{{index+1}}</template>
<template slot="action">
<a-button type="link" icon="eye">详情</a-button>
<a-button type="link" icon="edit">编辑</a-button>
<a-button type="link" icon="delete" style="color:red;">删除</a-button>
</template>
</a-table>
<dynamic-column :visible="visible" :columns="columns" @close="close"></dynamic-column>
</div>
</template>
<script>
import dynamicColumn from "@/components/dynamicColumn.vue"
export default {
components:{dynamicColumn},
data(){
return{
columns:[
{title:'序号',width:80,align:'center',scopedSlots:{customRender:'index'}},
{title:'姓名',align:'center',dataIndex:'name',key:'name'},
{title:'性别',align:'center',dataIndex:'sex',key:'sex'},
{title:'年龄',align:'center',dataIndex:'age',key:'age'},
{title:'籍贯',align:'center',dataIndex:'place',key:'place'},
{title:'部门',align:'center',dataIndex:'depart',key:'depart'},
{title:'岗位',align:'center',dataIndex:'post',key:'post'},
{title:'职长',align:'center',dataIndex:'postTime',key:'postTime'},
{title:'能力',align:'center',dataIndex:'abillty',key:'abillty'},
{title:'操作',width:300,align:'center',scopedSlots:{customRender:'action'}},
],
dataList:[
{name:'妲己',sex:'女',age:'17',place:'山东',depart:'财务',post:'部长',postTime:'2年',abillty:'优'},
{name:'墨子',sex:'男',age:'19',place:'广州',depart:'人资',post:'部长',postTime:'3年',abillty:'良'},
{name:'鲁班',sex:'男',age:'18',place:'上海',depart:'技术',post:'部长',postTime:'2年',abillty:'优'},
{name:'庄周',sex:'女',age:'21',place:'河北',depart:'后勤',post:'部长',postTime:'4年',abillty:'良'},
],
visible:false
}
},
methods:{
close(list){
if(list){
this.columns=list
}else{
this.visible=false
}
}
}
}
</script>
<style lang="scss" scoped>
.btn-top{
padding: 10px;
display: flex;
justify-content: space-between;
}
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)