门户网站视频,买服饰网站建设,贸易做网站,这么便宜?若依框架自带一个组件#xff0c;封装了关于表格#xff0c;展示和隐藏表格列的功能#xff1b; 使用效果就是这样的#xff0c;在表格上面#xff0c;三个框#xff0c;从左到右分别是隐藏上面搜索#xff0c;刷新列表#xff0c;和显隐列的功能#xff1b; 一、下面…
若依框架自带一个组件封装了关于表格展示和隐藏表格列的功能 使用效果就是这样的在表格上面三个框从左到右分别是隐藏上面搜索刷新列表和显隐列的功能 一、下面的代码放到RightToolbar/index.vue下
templatediv classtop-right-btn :stylestyleel-rowel-tooltip classitem effectdark :contentshowSearch ? 隐藏搜索 : 显示搜索 placementtop v-ifsearchel-button circle iconSearch clicktoggleSearch() //el-tooltipel-tooltip classitem effectdark content刷新 placementtopel-button circle iconRefresh clickrefresh() //el-tooltipel-tooltip classitem effectdark content显隐列 placementtop v-ifcolumnsel-button circle iconMenu clickshowColumn() //el-tooltip/el-rowel-dialog :titletitle v-modelopen append-to-bodyel-transfer:titles[显示, 隐藏]v-modelvalue:datacolumnschangedataChange/el-transfer/el-dialog/div
/templatescript setup
const props defineProps({showSearch: {type: Boolean,default: true,},columns: {type: Array,},search: {type: Boolean,default: true,},gutter: {type: Number,default: 10,},
})const emits defineEmits([update:showSearch, queryTable]);// 显隐数据
const value ref([]);
// 弹出层标题
const title ref(显示/隐藏);
// 是否显示弹出层
const open ref(false);const style computed(() {const ret {};if (props.gutter) {ret.marginRight ${props.gutter / 2}px;}return ret;
});// 搜索
function toggleSearch() {emits(update:showSearch, !props.showSearch);
}// 刷新
function refresh() {emits(queryTable);
}// 右侧列表元素变化
function dataChange(data) {for (let item in props.columns) {const key props.columns[item].key;props.columns[item].visible !data.includes(key);}
}// 打开显隐列dialog
function showColumn() {open.value true;
}// 显隐列初始默认隐藏列
for (let item in props.columns) {if (props.columns[item].visible false) {value.value.push(parseInt(item));}
}
/scriptstyle langscss scoped
:deep(.el-transfer__button) {border-radius: 50%;display: block;margin-left: 0px;
}
:deep(.el-transfer__button:first-child) {margin-bottom: 10px;
}.my-el-transfer {text-align: center;
}
/style
二、main.js文件里封装
// 自定义表格工具组件
import RightToolbar from /components/RightToolbarapp.component(RightToolbar, RightToolbar)放到main.js全局挂载使用的时候无须引入
三、具体代码 right-toolbar v-model:showSearchshowSearch queryTablegetList :columnscolumns/right-toolbar
el-table v-loadingloading :datauserList selection-changehandleSelectionChangeel-table-column typeselection width50 /el-table-column label用户编号 keyuserId propuserId v-ifcolumns[0].visible /el-table-column label用户名称 keyuserName propuserName v-ifcolumns[1].visible :show-overflow-tooltiptrue /el-table-column label用户昵称 keynickName propnickName v-ifcolumns[2].visible :show-overflow-tooltiptrue /el-table-column label部门 keydeptName propdept.deptName v-ifcolumns[3].visible :show-overflow-tooltiptrue /el-table-column label手机号码 keyphonenumber propphonenumber v-ifcolumns[4].visible width120 /el-table-column label状态 keystatus v-ifcolumns[5].visible/el-table-columnel-table-column label创建时间 propcreateTime v-ifcolumns[6].visible width160/el-table-column/el-table下面是一页中必须有的showSearch要定义是控制表单是否显示的
columns也是必须有的把表格的每一项按顺序写表格里每一项需要控制的要写v-ifcolumns[0].visible 0就是key值
const showSearch ref(true);
// 列显隐信息
const columns ref([{ key: 0, label: 用户编号, visible: true },{ key: 1, label: 用户名称, visible: true },{ key: 2, label: 用户昵称, visible: true },{ key: 3, label: 部门, visible: true },{ key: 4, label: 手机号码, visible: true },{ key: 5, label: 状态, visible: true },{ key: 6, label: 创建时间, visible: true }
]);
/** 查询用户列表 */
function getList() {loading.value true;listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(res {loading.value false;userList.value res.rows;total.value res.total;});
};
四、效果展示
