| | |
|---|
| | | <!-- @author Shiyn/ huangmx 20200807优化-->
|
|---|
| | | <template>
|
|---|
| | | <div class="top-right-btn">
|
|---|
| | | <el-row>
|
|---|
| | |
|---|
| | | <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 {};
|
|---|
| | | 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>
|
|---|
