显隐列组件支持复选框弹出类型
This commit is contained in:
parent
78b1ac4a60
commit
d71ee5dba1
|
@ -8,7 +8,17 @@
|
|||
<el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
|
||||
<el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" />
|
||||
<el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" v-if="showColumnsType == 'transfer'"/>
|
||||
<el-dropdown trigger="click" :hide-on-click="false" style="padding-left: 12px" v-if="showColumnsType == 'checkbox'">
|
||||
<el-button size="mini" circle icon="el-icon-menu" />
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<template v-for="item in columns">
|
||||
<el-dropdown-item :key="item.key">
|
||||
<el-checkbox :checked="item.visible" @change="checkboxChange($event, item.label)" :label="item.label" />
|
||||
</el-dropdown-item>
|
||||
</template>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-tooltip>
|
||||
</el-row>
|
||||
<el-dialog :title="title" :visible.sync="open" append-to-body>
|
||||
|
@ -35,17 +45,26 @@ export default {
|
|||
};
|
||||
},
|
||||
props: {
|
||||
/* 是否显示检索条件 */
|
||||
showSearch: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
/* 显隐列信息 */
|
||||
columns: {
|
||||
type: Array,
|
||||
},
|
||||
/* 是否显示检索图标 */
|
||||
search: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
/* 显隐列类型(transfer穿梭框、checkbox复选框) */
|
||||
showColumnsType: {
|
||||
type: String,
|
||||
default: "checkbox",
|
||||
},
|
||||
/* 右外边距 */
|
||||
gutter: {
|
||||
type: Number,
|
||||
default: 10,
|
||||
|
@ -61,12 +80,14 @@ export default {
|
|||
}
|
||||
},
|
||||
created() {
|
||||
if (this.showColumnsType == 'transfer') {
|
||||
// 显隐列初始默认隐藏列
|
||||
for (let item in this.columns) {
|
||||
if (this.columns[item].visible === false) {
|
||||
this.value.push(parseInt(item));
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 搜索
|
||||
|
@ -88,6 +109,10 @@ export default {
|
|||
showColumn() {
|
||||
this.open = true;
|
||||
},
|
||||
// 勾选
|
||||
checkboxChange(event, label) {
|
||||
this.columns.filter(item => item.label == label)[0].visible = event;
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
Loading…
Reference in New Issue