123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 |
- <template>
- <div class="top-right-btn">
- <el-row>
- <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
- <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
- </el-tooltip>
- <el-tooltip class="item" effect="dark" content="刷新" placement="top">
- <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-tooltip>
- </el-row>
- <el-dialog :title="title" :visible.sync="open" append-to-body>
- <el-transfer
- :titles="['显示', '隐藏']"
- v-model="value"
- :data="columns"
- @change="dataChange"
- ></el-transfer>
- </el-dialog>
- </div>
- </template>
- <script>
- export default {
- name: "RightToolbar",
- data() {
- return {
- // 显隐数据
- value: [],
- // 弹出层标题
- title: "显示/隐藏",
- // 是否显示弹出层
- open: false,
- };
- },
- props: {
- showSearch: {
- type: Boolean,
- default: true,
- },
- columns: {
- type: Array,
- },
- },
- created() {
- // 显隐列初始默认隐藏列
- for (let item in this.columns) {
- if (this.columns[item].visible === false) {
- this.value.push(parseInt(item));
- }
- }
- },
- methods: {
- // 搜索
- toggleSearch() {
- this.$emit("update:showSearch", !this.showSearch);
- },
- // 刷新
- refresh() {
- this.$emit("queryTable");
- },
- // 右侧列表元素变化
- dataChange(data) {
- for (let item in this.columns) {
- const key = this.columns[item].key;
- this.columns[item].visible = !data.includes(key);
- }
- },
- // 打开显隐列dialog
- showColumn() {
- this.open = true;
- },
- },
- };
- </script>
- <style lang="scss" scoped>
- ::v-deep .el-transfer__button {
- border-radius: 50%;
- padding: 12px;
- display: block;
- margin-left: 0px;
- }
- ::v-deep .el-transfer__button:first-child {
- margin-bottom: 10px;
- }
- </style>
|