显隐列组件支持复选框弹出类型

This commit is contained in:
RuoYi 2023-12-01 11:20:12 +08:00
parent 78b1ac4a60
commit d71ee5dba1
1 changed files with 30 additions and 5 deletions

View File

@ -8,7 +8,17 @@
<el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" /> <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
</el-tooltip> </el-tooltip>
<el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns"> <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-tooltip>
</el-row> </el-row>
<el-dialog :title="title" :visible.sync="open" append-to-body> <el-dialog :title="title" :visible.sync="open" append-to-body>
@ -35,17 +45,26 @@ export default {
}; };
}, },
props: { props: {
/* 是否显示检索条件 */
showSearch: { showSearch: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
/* 显隐列信息 */
columns: { columns: {
type: Array, type: Array,
}, },
/* 是否显示检索图标 */
search: { search: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
/* 显隐列类型transfer穿梭框、checkbox复选框 */
showColumnsType: {
type: String,
default: "checkbox",
},
/* 右外边距 */
gutter: { gutter: {
type: Number, type: Number,
default: 10, default: 10,
@ -61,10 +80,12 @@ export default {
} }
}, },
created() { created() {
// if (this.showColumnsType == 'transfer') {
for (let item in this.columns) { //
if (this.columns[item].visible === false) { for (let item in this.columns) {
this.value.push(parseInt(item)); if (this.columns[item].visible === false) {
this.value.push(parseInt(item));
}
} }
} }
}, },
@ -88,6 +109,10 @@ export default {
showColumn() { showColumn() {
this.open = true; this.open = true;
}, },
//
checkboxChange(event, label) {
this.columns.filter(item => item.label == label)[0].visible = event;
}
}, },
}; };
</script> </script>