| | |
|---|
| | | <el-button circle icon="Refresh" @click="refresh()" />
|
|---|
| | | </el-tooltip>
|
|---|
| | | <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
|
|---|
| | | <el-button circle icon="Menu" @click="showColumn()" />
|
|---|
| | | <el-button circle 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="Menu" />
|
|---|
| | | <template #dropdown>
|
|---|
| | | <el-dropdown-menu>
|
|---|
| | | <template v-for="item in columns" :key="item.key">
|
|---|
| | | <el-dropdown-item>
|
|---|
| | | <el-checkbox :checked="item.visible" @change="checkboxChange($event, item.label)" :label="item.label" />
|
|---|
| | | </el-dropdown-item>
|
|---|
| | | </template>
|
|---|
| | | </el-dropdown-menu>
|
|---|
| | | </template>
|
|---|
| | | </el-dropdown>
|
|---|
| | | </el-tooltip>
|
|---|
| | | </el-row>
|
|---|
| | | <el-dialog :title="title" v-model="open" append-to-body>
|
|---|
| | |
|---|
| | |
|
|---|
| | | <script setup>
|
|---|
| | | const props = defineProps({
|
|---|
| | | /* 是否显示检索条件 */
|
|---|
| | | 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,
|
|---|
| | |
|---|
| | | open.value = true;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | // 显隐列初始默认隐藏列
|
|---|
| | | for (let item in props.columns) {
|
|---|
| | | if (props.columns[item].visible === false) {
|
|---|
| | | value.value.push(parseInt(item));
|
|---|
| | | if (props.showColumnsType == 'transfer') {
|
|---|
| | | // 显隐列初始默认隐藏列
|
|---|
| | | for (let item in props.columns) {
|
|---|
| | | if (props.columns[item].visible === false) {
|
|---|
| | | value.value.push(parseInt(item));
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | // 勾选
|
|---|
| | | function checkboxChange(event, label) {
|
|---|
| | | props.columns.filter(item => item.label == label)[0].visible = event;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | </script>
|
|---|
| | |
|
|---|
| | | <style lang='scss' scoped>
|
|---|
| | |
|---|
| | | :deep(.el-transfer__button:first-child) {
|
|---|
| | | margin-bottom: 10px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .my-el-transfer {
|
|---|
| | | text-align: center;
|
|---|
| | | :deep(.el-dropdown-menu__item) {
|
|---|
| | | line-height: 30px;
|
|---|
| | | padding: 0 17px;
|
|---|
| | | }
|
|---|
| | | </style> |
|---|
| | | </style>
|
|---|
