Element-Plus

最近后端用这个框架，明天遇到了这个问题，搜查无果，看了下源码，捣鼓了良久才实现，记录一下。_(:」∠)_心愿对遇到的敌人有帮忙。 实现成果 column那边用到"render-header" { label: '注册人数', prop: 'register', align: 'center', width: 105, operator: false, "render-header":(obj:anyObj,msg:string) => renderHeader(obj,'玩家上级团队当天注册人数（只蕴含一级）'),}而后render办法如下 const renderHeaderTP = ({column}:any,msg:string)=> { return createVNode( resolveComponent('el-tooltip'), { effect: "dark", content: msg, placement: 'top' }, { default: createVNode( 'i', { class:"fa fa-exclamation-circle icon my-tooltip" }, column.label ) } )}css /* 自适应-e */.my-tooltip::before{ float: right; margin-left: 2px;}

一个vue3的筛选器UI组件，反对字符串、数字、下拉、级联、区域、日期、工夫等多种数据类型的筛选github:https://github.com/Liberty-liu/Everright-filter Features1.反对多种数据类型的筛选，包含字符串、数字、下拉、级联、地区、日期和工夫。无论你须要对不同类型的数据进行筛选，都能满足你的需要。2.提供了丰盛的操作符，如等于、不等于、大于、小于、区间等，让你可能依据具体条件灵便地定义筛选规定。3.提供了极大的灵活性。它反对对日期、年、月和日进行筛选。还反对绝对工夫和相对工夫的抉择，现在日、本周、本月、往年、过来N天/小时、将来N天/小时等。这使得日期筛选更加灵便，可能满足各种工夫维度的需要。4.反对条件的分组设置，能够通过应用逻辑运算符（AND/OR）组合多个条件，实现简单的数据筛选逻辑。能够更准确地筛选出合乎多个条件的数据，满足高级数据分析和开掘的需要。5.针对行为数据，反对设置起止工夫、限度次数和限度属性。你能够准确地筛选出特定时间段内产生的行为，并依据次数和属性条件进行进一步过滤。6.每个筛选类型独自抽离进去应用，能够轻松嵌入到不同的UI界面中。无论是搜寻框、筛选面板还是表格的表头，everright-filter都能提供统一的性能和数据结构，无需为不同界面独自开发筛选性能，节俭了开发资源和工夫。7.开发人员能够依据文档UI界面轻松配置所需性能的数据结构，节俭了繁琐的手动编码和调试过程。8.反对中文和英文Sample screenshottext number time date cascader select linear matrix quick-search quick-filter

我的项目中须要表格数据主动滚动，我的项目基于element-plus，办法如下： function useElTableScroll(dom, autoScrollFlag) { const scrollTop = ref(0) //内容高度 const scrollHeight = ref(0) //滚动区域 const scrollConHeight = ref(0) //定时器 const timer = ref(null) //定时器 const timerout = ref(null) var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame; //是否主动滚动 const autoScroll = () => { if (!autoScrollFlag) { return false } timerout.value = setTimeout(() => { scrollConHeight.value = dom.value.$refs.bodyWrapper.clientHeight scrollHeight.value = dom.value.$refs.tableBody.clientHeight scrollStep() }, 3000) } //滚动增加 function scrollStep() { scrollTop.value++ if ( scrollTop.value > scrollHeight.value - scrollConHeight.value && scrollHeight.value > 0 ) { timerout.value && clearTimeout(timerout.value) setTimeout(() => { scrollTop.value = 0 dom.value.setScrollTop(scrollTop.value) autoScroll() }, 3000) } else { timer.value = requestAnimationFrame(scrollStep) } dom.value.setScrollTop(scrollTop.value) } //革除滚动 function clearScroll() { timer.value && cancelAnimationFrame(timer.value) timerout.value && clearTimeout(timerout.value) } //鼠标进入 function cellMouseEnter() { clearScroll() } //鼠标移出 function cellMouseLeave() { scrollTop.value = dom.value.$el.querySelector( ".el-scrollbar__wrap" ).scrollTop autoScroll() } return { autoScroll, clearScroll, cellMouseEnter, cellMouseLeave }}export default useElTableScrollsetup中调用如下： ...

import { ref, Ref, onMounted, nextTick, unref } from 'vue';import _ from 'lodash';import * as DbCacheUtils from '@/utils/DbCacheUtils';import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults';import { setup as useRx } from './RxBusMixins';interface MyProps { table: Ref<any>; /** 是否主动加载配置 */ auto?: boolean; cacheKey?: string;}interface MyOption { label: string; prop: string; is_check: boolean;}interface TableStore { commit(name: string, ...args); states: { _columns: Ref<TableColumnCtx<any>[]>; }; updateColumns();}function SaveData(key: string, options: MyOption[]) { return DbCacheUtils.SetValue(key, JSON.stringify(options));}async function GetData(key: string): Promise<MyOption[]> { const json = await DbCacheUtils.GetValue<string>(key); if (!json) return null; return JSON.parse(json);}/** * @param props * @returns */export function useTableColumns<T = any>(props: MyProps) { const options = ref<MyOption[]>([]); const rxHub = useRx(); function GetCacheKey() { return props.cacheKey || 'table'; } let storeColumns: TableColumnCtx<T>[]; /** * 依据配置初始化列 */ async function InitShowColumns() { const table = props.table.value; const store: TableStore = table.store; const array = unref(store.states._columns); storeColumns = _.clone(array); const list = await GetData(GetCacheKey()); if (list != null && list.length > 0) { options.value = list; InitConfig(); } else { const array = unref(store.states._columns); options.value = array.filter(t => t.property != null).map(t => ({ prop: t.property, label: t.label, is_check: true, })); } // console.log('table store', table.store); } onMounted(async () => { await nextTick(); if (props.auto !== false) { InitShowColumns(); } }); /** * 弹出列设置 */ function ShowColumnsConfig() { rxHub.emit('ShowTableColumnDialog', { options: options.value, callback: async (list) => { options.value = list; InitConfig(); } }); } async function InitConfig() { const table = props.table.value; const store: TableStore = table.store; const array = unref(store.states._columns); options.value.forEach(option => { if (option.is_check === false) { const col = array.find(t => t.property === option.prop); if (col != null) { store.commit('removeColumn', col, null); } } else { const col = storeColumns.find(t => t.property === option.prop); if (!array.some(t => t.property === option.prop)) { store.commit('insertColumn', col, null); } } }); await nextTick(); store.updateColumns(); await SaveData(GetCacheKey(), options.value); } return { InitShowColumns, ShowColumnsConfig, };}