抚顺网站网站建设,浦江县建设局网站,英文网站建设 淮安,首饰盒东莞网站建设用过若依的都知道#xff0c;在使用el-table 时候#xff0c;实现列显隐效果是要给每个列加v-if 判断的#xff0c;这种代码过于繁琐#xff0c;于是翻看el-table包的代码#xff0c;调试后发现内部的【插入】和【删除】两个方法可以达到我们要的效果。 项目不提供源码在使用el-table 时候实现列显隐效果是要给每个列加v-if 判断的这种代码过于繁琐于是翻看el-table包的代码调试后发现内部的【插入】和【删除】两个方法可以达到我们要的效果。 项目不提供源码核心代码都贴上了 代码动刀看似有点多实则一个地方就一点块。el-table的源码若依RightToolBar本身组件不过轮子造完都是有用的。 没有rightBar的项目可以自己对应数据模拟一个交互操作的方式来实现
上图可以看到基于若依的RightBar组件去实现列显隐并且存到vuex的持久化中vuex本地存储中并且去掉了原先若依的RightBar组件弹窗方式。
项目是用tailwindcss 部分class类名自己去计算
RightBar的使用方法和修改内容 right-toolbar:showSearch.syncshowSearchqueryTablegetList:checkTableInfo.synccheckTableInfointeractionx (hiddenColumns x):componentName$options.name/templatediv classtop-right-btn :stylestyleel-rowel-tooltip classitem effectdark :contentshowSearch ? 隐藏搜索 : 显示搜索 placementtop v-ifsearchel-button sizemini circle iconel-icon-search click$emit(update:showSearch, !showSearch) //el-tooltipel-tooltip classitem effectdark content刷新 placementtopel-button sizemini circle iconel-icon-refresh click$emit(queryTable) //el-tooltipel-tooltip v-ifcheckTableInfo.length classitem effectdark content显隐列 placementbottom-startel-popover v-modelvisible placementright triggerclickel-checkbox-group v-modelcheckListel-checkbox classblock v-for(item, index) in checkTableInfo :disableditem selection || item 操作 :keyindex :labelitem //el-checkbox-groupel-divider classmy-4 /divel-button sizemini typeprimary clicksubmit确定/el-buttonel-button v-ifcomponentName sizemini clickcancel取消/el-button/divel-button classml-2.5 slotreference sizemini circle iconel-icon-menu //el-popover/el-tooltip/el-row/div
/templatescript
import { mapState, mapMutations } from vuexexport default {name: RightToolbar,data() {return {checkList: Array.from(this.checkTableInfo),visible: false,}},props: {showSearch: { type: Boolean, default: true },search: { type: Boolean, default: true },gutter: { type: Number, default: 10 },checkTableInfo: { type: Array, default: () [] },componentName: { type: String, default: },},mounted() {if (this.componentName this.tableColumns[this.componentName]) {this.tableColumns[this.componentName]?.length (this.checkList this.tableColumns[this.componentName])this.$emit(interaction, this.checkList)}},methods: {...mapMutations(tablecolumn, [setTableCache]),submit() {this.$emit(interaction, this.checkList)this.visible falseif (!this.componentName) returnthis.setTableCache({ key: [this.componentName], value: this.checkList })},cancel() {this.tableColumns[this.componentName]?.length (this.checkList this.tableColumns[this.componentName])},},computed: {...mapState(tablecolumn, [tableColumns]),style() {const ret {}if (this.gutter) {ret.marginRight ${this.gutter / 2}px}return ret},},
}
/scriptstyle langscss 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
主页面
给table传递props 属性checkTableInfo 属性即可 一定是包括column的所有列的label
templatedivright-toolbar :showSearch.syncshowSearch queryTablegetList :checkTableInfo.synccheckTableInfo interaction(x) (hiddenColumns x) :componentName$options.name /el-table reftable :datatable.data v-loadingtable.loading :hiddenColumnshiddenColumns selection-change(ids) (table.ids ids)el-table-column aligncenter typeselection width55 /el-table-column aligncenter label类型 proptype /el-table-column aligncenter label名称 propname /el-table-column aligncenter label描述信息 propdesp /el-table-column aligncenter label值 propvalue /el-table-column aligncenter label默认值 propdefaultValue /el-table-column aligncenter label操作 class-namesmall-padding fixed-widthtemplate slot-scope{ row, column: col }el-button sizemini typetext iconel-icon-edit clickedit(row)修改/el-buttonel-button sizemini typetext iconel-icon-delete clickdel(row)删除/el-button/template/el-table-column/el-table/div
/templatescript
// import {} from
export default {name: Untitled-1,data() {return {showSearch: true,table: {ids: [],table: [{type: FilePath,name: probeEnforcement,desp: 文件生成路径,value: /home/qchen/,defaultValue: 3,}],loading: false,},hiddenColumns: [],checkTableInfo: [selection, 类型, 名称, 描述信息, 值, 默认值, 操作],};},mounted() {},methods: {getList() {}edit(row) {}del(row) {}},// End
};
/scriptstyle langcss scoped/style将node_modules中将table的源码找到打开里面的table.vue 将package里面的table源码导出,复制到components/ElementUI目录下即可修改代码需要在main.js中覆盖element的el-table最底下贴过一个链接有覆盖的路径
script
import { cloneDeep } from lodash-es
// watch 和props 里面加入下列两个属性
export default {props: {hiddenColumns: {type: Array,default: () [],},// ... 其他props},watch: {hiddenColumns: {immediate: true,handler(value) {const { states } this.store;const { columns, _columns } states;requestAnimationFrame(() {requestAnimationFrame(() {if (!this.cache_columns || !this.cache_columns.length) {this.cache_columns cloneDeep(columns);}if (!value.length) return;const show this.cache_columns.filter((x) value.includes(x.label));const hide this.cache_columns.filter((x) !value.includes(x.label) x.type ! selection);if (show.length) {const current_label _columns.map((item) item.label);const control_label show.map((item) item.label);control_label.forEach((item) {if (!current_label.includes(item)) {const column show.find((x) x.label item);this.store.commit(insertColumn, column, column.insertColumnIndex);}});}if (hide.length) {this.cache_columns.forEach((item) {hide.forEach((ite) {if (item.label ite.label) {const column _columns.find((x) x.label item.label);column this.store.commit(removeColumn, column);}});});}});});},},// ... 其他监听},// End
};
/script将el-table的源码找到翻开/El-Table/store/index.js。 约30行的位置 insertColumn(states, column, index, parent) {let array states._columnsif (parent) {array parent.childrenif (!array) array parent.children []}if (typeof index ! undefined) {array.splice(index, 0, column)} else {array.push(column)}if (column.type selection) {states.selectable column.selectablestates.reserveSelection column.reserveSelection}if (!column.insertColumnIndex) { // 加入 index 标识插入时用到column.insertColumnIndex index}if (this.table.$ready) {this.updateColumns() // hack for dynamics insert columnthis.scheduleLayout()}},最后将重新注册的el-table 整个文件重新注册一下这里有操作
