nx / creditNx · Commits

Commit d71ee5dba10765e9991608d9d0ba2e136aa8abdf

Authored by RuoYi
1 parent 78b1ac4a

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

Inline Side-by-side
Showing 1 changed file with 30 additions and 5 deletions
ruoyi-ui/src/components/RightToolbar/index.vue
  View file @d71ee5d
... ... @@ -8,7 +8,17 @@
8 8 <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
9 9 </el-tooltip>
10 10 <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
11   - <el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" />
  11 + <el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" v-if="showColumnsType == 'transfer'"/>
  12 + <el-dropdown trigger="click" :hide-on-click="false" style="padding-left: 12px" v-if="showColumnsType == 'checkbox'">
  13 + <el-button size="mini" circle icon="el-icon-menu" />
  14 + <el-dropdown-menu slot="dropdown">
  15 + <template v-for="item in columns">
  16 + <el-dropdown-item :key="item.key">
  17 + <el-checkbox :checked="item.visible" @change="checkboxChange($event, item.label)" :label="item.label" />
  18 + </el-dropdown-item>
  19 + </template>
  20 + </el-dropdown-menu>
  21 + </el-dropdown>
12 22 </el-tooltip>
13 23 </el-row>
14 24 <el-dialog :title="title" :visible.sync="open" append-to-body>
... ... @@ -35,17 +45,26 @@ export default {
35 45 };
36 46 },
37 47 props: {
  48 + /* 是否显示检索条件 */
38 49 showSearch: {
39 50 type: Boolean,
40 51 default: true,
41 52 },
  53 + /* 显隐列信息 */
42 54 columns: {
43 55 type: Array,
44 56 },
  57 + /* 是否显示检索图标 */
45 58 search: {
46 59 type: Boolean,
47 60 default: true,
48 61 },
  62 + /* 显隐列类型（transfer穿梭框、checkbox复选框） */
  63 + showColumnsType: {
  64 + type: String,
  65 + default: "checkbox",
  66 + },
  67 + /* 右外边距 */
49 68 gutter: {
50 69 type: Number,
51 70 default: 10,
... ... @@ -61,10 +80,12 @@ export default {
61 80 }
62 81 },
63 82 created() {
64   - // 显隐列初始默认隐藏列
65   - for (let item in this.columns) {
66   - if (this.columns[item].visible === false) {
67   - this.value.push(parseInt(item));
  83 + if (this.showColumnsType == 'transfer') {
  84 + // 显隐列初始默认隐藏列
  85 + for (let item in this.columns) {
  86 + if (this.columns[item].visible === false) {
  87 + this.value.push(parseInt(item));
  88 + }
68 89 }
69 90 }
70 91 },
... ... @@ -88,6 +109,10 @@ export default {
88 109 showColumn() {
89 110 this.open = true;
90 111 },
  112 + // 勾选
  113 + checkboxChange(event, label) {
  114 + this.columns.filter(item => item.label == label)[0].visible = event;
  115 + }
91 116 },
92 117 };
93 118 </script>
... ...