wordpress一行太宽了,十堰seo按天计费,seo静态页面生成系统,市场推广计划怎么写一、起因 1、需求#xff1a; 由于业务需求在页面一次性展示较多数据#xff0c;不低于上千#xff0c;但是每条数据涉及样式较多#xff0c;数据渲染过多就会导致页面卡顿 2、满足#xff1a; 大量数据加载#xff1b;表格功能#xff1a;列显隐、列顺序调整、固定、筛…一、起因 1、需求 由于业务需求在页面一次性展示较多数据不低于上千但是每条数据涉及样式较多数据渲染过多就会导致页面卡顿 2、满足 大量数据加载表格功能列显隐、列顺序调整、固定、筛选、排序表格调整存储本地 3、技术框架 若依、Element UI、vue2 二、umy-ui 1、umy-ui库中的table表格组件,它不造轮子。它改造了element-ui等等库的表格组件。只为了免费解决前端小伙伴的问题。 2、用前须知(这是关于表格的须知你应该认真读完下面的内容) 1. 表格解决卡顿问题那么虚拟表格原理呢大概就是 减少对DOM节点的渲染通过滚动函数节流实现滚动后事件来动态渲染数据2. 基础表格其实就是element的表格的升级版修改了ele的表格bug如果你想使用个普通表格你无需安装其他库就使用这个表格即可你可以发现基础表格里面的示例没有配置use-virtual 这个属性。3 基础表格没有使用use-virtual属性代表表格数据不多只想要一个普通的表格。如果你表格卡。请你关注下虚拟表格部分。4. 使用u-table 开启use-virtual虚拟可以支持微小的合并行|列 如2列 2行支持多级头, 超过2行2列可能布局错乱因为虚拟滚动的原理导致某些节点并未渲染。4.5 使用u-table 开启use-virtual不支持开展行如果需要展开行你是要虚拟表格部分的ux展开行5. u-table不支持展开行需要展开行使用ux-grid6. ux-grid解决列多 行多导致卡的情况 u-table解决行多的情况不解决列多的情况如你的列超过70你可能就需要使用ux-grid了因为此时你需要把列也虚拟7. 重点虚拟表格集成了基础表格的东西如属性/方法/事件8. 虚拟表格在本文档中呢 意思就是解决了数据量多导致卡顿的情况 基础表格在文档中呢意思就是升级版的el-table但是没解决数据多卡的情况9. 编辑型表格呢是解决那种表格单元带有输入框或者选择时间等等的情况而导致卡顿的场景意思就是表格单元格具有一定的操作单元格有自定义组件或者UI库组件等等10. 有了表格,怎么导出表格数据为excel并且带样式呢?,[请点击](https://github.com/livelyPeng/pl-export-excel)三、安装引入 1.安装 推荐使用 npm 的方式安装它能更好地和 webpack 打包工具配合使用 npm install umy-ui2.引入 main.js // 引入umy-ui import UmyUi from umy-uiVue.use(UmyUi);三、封装 以下代码是基于若依框架封装的主代码其余见附带资源中对应表格中输入或展示形式可自行封装 script export default {name: SuperUxTable,props: {// 数据value: {type: [Array],require: true,},// 字典dict: {type: [Object],require: true,},// 分页page: {type: [Object],require: false,},// 模板columns: {type: [Array],require: true,},// 是否显示序号index: {type: Boolean,default: false,},// 是否显示单选radio: {type: Boolean,default: false,},// 是否显示多选checkbox: {type: Boolean,default: false,},// 是否显示分页pagination: {type: Boolean,default: false,},// 是否列操作convenitentOperation: {type: Boolean,default: false,},// 是否禁止选择selectable: {type: Function,default: () {},},//storageKey: {type: String,},showSummary: {type: Boolean,default: false,},height: {type: [String, Number],require: false,},firstSummary: {type: Boolean,default: false,},},components: {ElDictTag: () import(/components/DictTag/index.vue),ElDraggable: () import(/components/draggable/index.vue),ElFilePreview: () import(/components/file-preview/index.vue),ElComputedInput: () import(/components/computed-input/index.vue),ElPopoverSelectV2: () import(/components/popover-select-v2/index.vue),ElPopoverMultipleSelectV2: () import(/components/popover-select-v2/multiple.vue),ElComputedInputV2: () import(/components/computed-input-v2/index.vue),ElPopoverTreeSelect: () import(/components/popover-tree-select/index.vue),ButtonHide: () import(./hide.vue),ButtonFreeze: () import(./freeze.vue),IconHide: () import(./once/hide.vue),IconSort: () import(./once/sort.vue),IconFreeze: () import(./once/freeze.vue),IconFilter: () import(./once/filters.vue),},data() {const { columns, storageKey } this.$props;const localColumns localStorage.getItem(storageKey);const innerColumns storageKey localColumns? JSON.parse(localColumns): columns.map(({ item, attr }) ({attr,item: { hidden: true, ...item },}));return {innerColumns: innerColumns,rowKey: id,// 选择selectData: [],selectState: false,// 过滤filterData: [],filterState: false,count: 0,scrollTop: 0,resizeHeight: 0,};},computed: {innerValue: {get() {if (this.filterState) {return this.filterData;} else if (this.selectState) {return this.selectData;} else {return this.$props.value;}},set(value) {this.$emit(input, value);},},showColumns: {get() {return this.innerColumns.filter(({ item }) item.hidden);},set() {},},filterRules: {get() {return Object.fromEntries(this.innerColumns.filter(({ item }) item.filter !!item.filter.length).map(({ item }) [item.key, item.filter]));},set() {},},tableHeight: {get() {let { height } this.$props;return height ? height : this.resizeHeight;},set() {},},},watch: {filterRules: {handler: function (newValue) {function multiFilter(array, filters) {const filterKeys Object.keys(filters);// filters all elements passing the criteriareturn array.filter((item) {// dynamically validate all filter criteriareturn filterKeys.every((key) {//ignore when the filter is empty Anneif (!filters[key].length) return true;return !!~filters[key].indexOf(item[key]);});});}this.filterState JSON.stringify(newValue) ! {};this.filterData multiFilter(this.$props.value, newValue);},},value: {handler: function (newValue) {if (this.value.length 0) {this.$refs.superUxTable this.$refs.superUxTable.clearSelection();}},immediate: true,deep: true,},},directives: {// 使用局部注册指令的方式resize: {// 指令的名称bind(el, binding) {// el为绑定的元素binding为绑定给指令的对象let width ,height ;function isReize() {const style document.defaultView.getComputedStyle(el);if (width ! style.width || height ! style.height) {binding.value(); // 关键}width style.width;height style.height;}el.__vueSetInterval__ setInterval(isReize, 300);},unbind(el) {clearInterval(el.__vueSetInterval__);},},},methods: {resize() {this.resizeHeight document.getElementsByClassName(el-super-ux-table)[0].offsetHeight -55;},//onSelectionChange(value) {this.selectData value;this.$emit(row-select, this.selectData);},//onRowClick(row, column, event) {const { radio, checkbox } this.$props;// 单选if (radio) {this.$emit(row-select, [row]);}// 多选if (checkbox) {this.$refs.superUxTable.toggleRowSelection([this.innerValue.find((item) item.id row.id),]);}},// 宽度onWidth({ column }) {this.innerColumns this.innerColumns.map(({ item, attr }) ({attr,item: {...item,width: item.key column.property ? column.resizeWidth : item.width,},}));if (this.$props.storageKey) {localStorage.setItem(this.$props.storageKey,JSON.stringify(this.innerColumns));}},// 隐藏onHide(prop) {this.$nextTick(() {this.$refs.superUxTable.doLayout();if (this.$props.storageKey) {localStorage.setItem(this.$props.storageKey,JSON.stringify(this.innerColumns));}});},// 排序onSort(prop) {const { key, sort } prop;console.log(key, key, sort, sort);this.$nextTick(() {this.$refs.superUxTable.sort(key, sort);this.$refs.superUxTable.doLayout();if (this.$props.storageKey) {localStorage.setItem(this.$props.storageKey,JSON.stringify(this.innerColumns));}});},// 冻结onFreeze() {this.$nextTick(() {this.$refs.superUxTable.doLayout();if (this.$props.storageKey) {localStorage.setItem(this.$props.storageKey,JSON.stringify(this.innerColumns));}this.count;});},// 过滤onFilter() {this.$nextTick(() {this.$refs.superUxTable.doLayout();if (this.$props.storageKey) {localStorage.setItem(this.$props.storageKey,JSON.stringify(this.innerColumns));}});},onFilters(value) {const {item: { key },attr: { dictName },} value;let dataList [];const dict this.dict.type[dictName];dataList Array.from(new Set(this.innerValue.map((item) item[key]).filter((item) item))).map((item) ({text: dictName? (dict.find((dictItem) dictItem.value item) || {}).label: item,value: item,}));return dataList;},// 继承el-table的MethodextendMethod() {const refMethod Object.entries(this.$refs[superUxTable]);for (const [key, value] of refMethod) {if (!(key.includes($) || key.includes(_))) {this[key] value;}}},getSummaries({ columns, data }) {const means []; // 合计let { firstSummary } this.$props;columns.forEach((column, columnIndex) {if (!firstSummary columnIndex 0) {means.push(合计);} else {const values data.map((item) Number(item[column.property]));let sumColumn this.showColumns.filter(({ item, attr }) attr.isSummary item.key column.property);// 合计// if (!values.every(value isNaN(value))) {if (sumColumn.length) {means[columnIndex] values.reduce((prev, curr) {const value Number(curr);if (!isNaN(value)) {return prev curr;} else {return prev;}}, 0);means[columnIndex] means[columnIndex].toFixed(2);} else {means[columnIndex] ;}}});// sums[index] sums[index] sums[index].toFixed(2); // 保留2位小数解决小数合计列return [means];},},created() {},mounted() {this.extendMethod();},updated() {this.$nextTick(() {this.$refs.superUxTable.doLayout();});},destroyed() {}, }; /scripttemplatediv classel-super-ux-table :keycount v-resizeresizeux-gridborderrow-keyuse-virtualkeep-sourceshow-overflowbeautify-tablerefsuperUxTablev-bind$attrs:heighttableHeightv-on$listeners:datainnerValue:show-summaryshowSummary:summary-methodgetSummariesrow-clickonRowClickheader-dragendonWidthselection-changeonSelectionChange:header-row-style{color: #515a6e,}styleflex: 1!-- 多选 --ux-table-columnv-ifcheckboxfixedleftwidth50aligncentertypecheckboxresizablereserve-selection:column-keyrowKey/ux-table-column!-- 序号 --ux-table-columnv-ifindexfixedleftwidth50title序号typeindexaligncenterclassis-indexresizable/ux-table-columnux-table-columnv-for({ item, attr }, index) in showColumns:keyitem.key index:fielditem.key:titleitem.title:fixeditem.fixed ? left : undefined:widthitem.width || 180:sortableitem.sortabledresizableshow-overflowtemplate slotheader slot-scopescopetemplatespan v-ifitem.require stylecolor: #ff4949*/spanspan:style{color:item.sort ||item.fixed ||(item.filter !!item.filter.length)? #1890ff: ,}{{ item.title }}/spantemplate!-- icon-sortv-ifitem.sortabledv-modelitem.sortsortonSort(item)/icon-sort --icon-freezev-ifitem.fixedabledv-modelitem.fixedfreezeonFreeze/icon-freezeicon-filterv-ifitem.filterabledv-modelitem.filter:filtersonFilters({ item, attr })filteronFilter/icon-filtericon-hidev-ifitem.hiddenabledv-modelitem.hiddenhideonHide/icon-hide/template/template/templatetemplate slot-scopescopeslot :nameitem.key v-bindscope :itemitem :attrattrtemplate v-ifattr.iscomponentv-ifattr.is el-dict-tagv-bindattr:size$attrs.size:valuescope.row[item.key]:optionsdict.type[attr.dictName]/componentcomponentv-else-ifattr.is el-popover-select-v2v-bindattrv-modelscope.row[item.key]:titleitem.title:size$attrs.size:source.syncscope.row/componentcomponentv-else-ifattr.is el-popover-multiple-select-v2v-bindattrv-modelscope.row[item.key]:titleitem.title:size$attrs.size:source.syncscope.row/componentcomponentv-else-ifattr.is el-selectv-bindattrv-modelscope.row[item.key]:size$attrs.sizetemplateel-optionv-foritem in dict.type[attr.dictName]:keyitem.value:labelitem.label:valueitem.value/el-option/template/componentcomponentv-elsev-bindattrv-modelscope.row[item.key]:size$attrs.sizestylewidth: 100%/component/templatetemplate v-elsecomponent v-ifattr.formatter isspan{{attr.formatter(scope.row)}}/componentcomponent v-else isspan{{scope.row[item.key] || --}}/component/template/slot/template/ux-table-columnslot/slot!-- /el-table --/ux-griddivstyleheight: 50px;display: flex;justify-content: space-between;align-items: center;:style{height: checkbox || pagination ? 50px : 0px,}div classmr-4template v-ifconvenitentOperationbutton-hide v-modelinnerColumns changeonHide/button-hide/template/divpaginationv-ifpaginationv-show!selectState:totalpage.total:page.syncpage.pageNum:limit.syncpage.pageSizepagination$emit(pagination, { ...$event })styleheight: 32px; padding: 0 !important; flex: 1; overflow-x: auto//div/div /templatestyle langscss scoped .el-super-ux-table {position: relative;display: flex;flex: 1;flex-direction: column;overflow: auto; } ::v-deep.el-super-ux-table .elx-cell {word-break: keep-all;white-space: nowrap;.icon-sort {display: none;}:hover .icon-sort {display: inline-block;}.icon-freeze {display: none;}:hover .icon-freeze {display: inline-block;}.icon-filter {display: none;}:hover .icon-filter {display: inline-block;}.icon-hide {display: none;}:hover .icon-hide {display: inline-block;}.elx-cell--sort {display: none;}:hover .elx-cell--sort {display: inline-block;} }::v-deep.uxbeautifyTableClass.elx-header--column.elx-resizable.is--line:before {height: 100%;background-color: #dfe6ec; } /style四、实例 el-super-ux-tableindexv-modelmaterialInfo[item.key]:dictdict:reftabName:columnscolumns:size$attrs.size:height420!-- 判断是否禁用 --template slotdrug slot-scopescopecomponentv-bindscope.attrv-modelscope.row[scope.item.key]:size$attrs.size:source.syncscope.row:disabled!(scope.row.medicineMaterial 0)el-optionv-foritem in dict.type[scope.attr.dictName]:keyitem.value:labelitem.label:valueitem.value/el-option/component/templatetemplate slotregistrationNo slot-scopescopecomponentv-bindscope.attrv-modelscope.row[scope.item.key]:size$attrs.size:source.syncscope.row:disabled!(scope.row.medicineMaterial 0)/component/templateux-table-columnfixedrighttitle操作width120aligncentertemplate slotheader slot-scopescopeel-buttontypetext:size$attrs.sizeclickuseRowAdd(tabName)增行/el-button/templatetemplate slot-scopescopeel-buttontypetext:size$attrs.sizeclick.native.preventuseRowRemove(tabName, scope)删除/el-buttonAmendantRecordv-iftabName materialBasic addType edit scope.row.idv-modelscope.row/AmendantRecord/template/ux-table-column/el-super-ux-table