77 <el-tooltip class =" item" effect =" dark" content =" 刷新" placement =" top"
88 <el-button size =" mini" circle icon =" el-icon-refresh" @click =" refresh()"
99 </el-tooltip >
10- <el-tooltip class =" item" effect =" dark" content =" 显隐列" placement =" top" v-if =" columns"
10+ <el-tooltip class =" item" effect =" dark" content =" 显隐列" placement =" top" v-if =" Object.keys( columns).length > 0 "
1111 <el-button size =" mini" circle icon =" el-icon-menu" @click =" showColumn()" v-if =" showColumnsType == 'transfer'"
1212 <el-dropdown trigger =" click" :hide-on-click =" false" style =" padding-left 12px " v-if =" showColumnsType == 'checkbox'"
1313 <el-button size =" mini" circle icon =" el-icon-menu"
1717 <el-checkbox :indeterminate =" isIndeterminate" v-model =" isChecked" @change =" toggleCheckAll" el-checkbox >
1818 </el-dropdown-item >
1919 <div class =" check-line" div >
20- <template v-for =" item in columns " >
21- <el-dropdown-item :key =" item. key"
22- <el-checkbox v-model =" item.visible" @change =" checkboxChange($event, item.label )" :label =" item.label"
20+ <template v-for =" ( item , key ) in columns " >
21+ <el-dropdown-item :key =" key"
22+ <el-checkbox v-model =" item.visible" @change =" checkboxChange($event, key )" :label =" item.label"
2323 </el-dropdown-item >
2424 </template >
2525 </el-dropdown-menu >
3030 <el-transfer
3131 :titles =" ['显示', '隐藏']"
3232 v-model =" value"
33- :data =" columns "
33+ :data =" transferData "
3434 @change =" dataChange"
3535 ></el-transfer >
3636 </el-dialog >
3737 </div >
3838</template >
39+
3940<script >
4041export default {
4142 name: " RightToolbar"
@@ -47,17 +48,18 @@ export default {
4748 title: " 显示/隐藏"
4849 // 是否显示弹出层
4950 open: false
50- };
51+ }
5152 },
5253 props: {
5354 /* 是否显示检索条件 */
5455 showSearch: {
5556 type: Boolean ,
5657 default: true
5758 },
58- /* 显隐列信息 */
59+ /* 显隐列信息（数组格式、对象格式） */
5960 columns: {
60- type: Array
61+ type: [Array , Object ],
62+ default : () => ({})
6163 },
6264 /* 是否显示检索图标 */
6365 search: {
@@ -77,64 +79,94 @@ export default {
7779 },
7880 computed: {
7981 style () {
80- const ret = {};
82+ const ret = {}
8183 if (this .gutter ) {
82- ret .marginRight = ` ${ this .gutter / 2 } ` ;
84+ ret .marginRight = ` ${ this .gutter / 2 } `
8385 }
84- return ret;
86+ return ret
8587 },
8688 isChecked: {
8789 get () {
88- return this .columns . every ((col ) => col .visible );
90+ return Array . isArray ( this .columns ) ? this . columns . every ((col ) => col .visible ) : Object . values ( this . columns ). every (( col ) => col . visible )
8991 },
9092 set () {}
9193 },
9294 isIndeterminate () {
93- return this .columns .some ((col ) => col .visible ) && ! this .isChecked ;
95+ return Array .isArray (this .columns ) ? this .columns .some ((col ) => col .visible ) && ! this .isChecked : Object .values (this .columns ).some ((col ) => col .visible ) && ! this .isChecked
96+ },
97+ transferData () {
98+ if (Array .isArray (this .columns )) {
99+ return this .columns .map ((item , index ) => ({ key: index, label: item .label }))
100+ } else {
101+ return Object .keys (this .columns ).map ((key , index ) => ({ key: index, label: this .columns [key].label }))
102+ }
94103 }
95104 },
96105 created () {
97106 if (this .showColumnsType == ' transfer'
98- // 显隐列初始默认隐藏列
99- for (let item in this .columns ) {
100- if (this .columns [item].visible === false ) {
101- this .value .push (parseInt (item));
107+ // transfer穿梭显隐列初始默认隐藏列
108+ if (Array .isArray (this .columns )) {
109+ for (let item in this .columns ) {
110+ if (this .columns [item].visible === false ) {
111+ this .value .push (parseInt (item))
112+ }
102113 }
114+ } else {
115+ Object .keys (this .columns ).forEach ((key , index ) => {
116+ if (this .columns [key].visible === false ) {
117+ this .value .push (index)
118+ }
119+ })
103120 }
104121 }
105122 },
106123 methods: {
107124 // 搜索
108125 toggleSearch () {
109- this .$emit (" update:showSearch" ! this .showSearch );
126+ this .$emit (" update:showSearch" ! this .showSearch )
110127 },
111128 // 刷新
112129 refresh () {
113- this .$emit (" queryTable" ;
130+ this .$emit (" queryTable"
114131 },
115132 // 右侧列表元素变化
116133 dataChange (data ) {
117- for (let item in this .columns ) {
118- const key = this .columns [item].key ;
119- this .columns [item].visible = ! data .includes (key);
134+ if (Array .isArray (this .columns )) {
135+ for (let item in this .columns ) {
136+ const key = this .columns [item].key
137+ this .columns [item].visible = ! data .includes (key)
138+ }
139+ } else {
140+ Object .keys (this .columns ).forEach ((key , index ) => {
141+ this .columns [key].visible = ! data .includes (index)
142+ })
120143 }
121144 },
122145 // 打开显隐列dialog
123146 showColumn () {
124- this .open = true ;
147+ this .open = true
125148 },
126149 // 单勾选
127- checkboxChange (event , label ) {
128- this .columns .filter (item => item .label == label)[0 ].visible = event ;
150+ checkboxChange (event , key ) {
151+ if (Array .isArray (this .columns )) {
152+ this .columns .filter (item => item .key == key)[0 ].visible = event
153+ } else {
154+ this .columns [key].visible = event
155+ }
129156 },
130157 // 切换全选/反选
131158 toggleCheckAll () {
132- const newValue = ! this .isChecked ;
133- this .columns .forEach ((col ) => (col .visible = newValue))
159+ const newValue = ! this .isChecked
160+ if (Array .isArray (this .columns )) {
161+ this .columns .forEach ((col ) => (col .visible = newValue))
162+ } else {
163+ Object .values (this .columns ).forEach ((col ) => (col .visible = newValue))
164+ }
134165 }
135166 },
136- };
167+ }
137168script >
169+
138170<style lang="scss" scoped>
139171::v-deep .el-transfer__button {
140172 border-radius 50% ;
0 commit comments