Vue2虚拟列表，umy-ui封装

一、起因

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-ui

2.引入
main.js

// 引入umy-ui
import UmyUi from 'umy-ui'Vue.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() {},
};
</script><template><div class="el-super-ux-table" :key="count" v-resize="resize"><ux-gridborderrow-keyuse-virtualkeep-sourceshow-overflowbeautify-tableref="superUxTable"v-bind="$attrs":height="tableHeight"v-on="$listeners":data="innerValue":show-summary="showSummary":summary-method="getSummaries"@row-click="onRowClick"@header-dragend="onWidth"@selection-change="onSelectionChange":header-row-style="{color: '#515a6e',}"style="flex: 1"><!-- 多选 --><ux-table-columnv-if="checkbox"fixed="left"width="50"align="center"type="checkbox"resizablereserve-selection:column-key="rowKey"></ux-table-column><!-- 序号 --><ux-table-columnv-if="index"fixed="left"width="50"title="序号"type="index"align="center"class="is-index"resizable></ux-table-column><ux-table-columnv-for="({ item, attr }, index) in showColumns":key="item.key + index":field="item.key":title="item.title":fixed="item.fixed ? 'left' : undefined":width="item.width || 180":sortable="item.sortabled"resizableshow-overflow><template slot="header" slot-scope="scope"><template><span v-if="item.require" style="color: #ff4949">*</span><span:style="{color:item.sort ||item.fixed ||(item.filter && !!item.filter.length)? '#1890ff': '',}">{{ item.title }}</span><template><!-- <icon-sortv-if="item.sortabled"v-model="item.sort"@sort="onSort(item)"></icon-sort> --><icon-freezev-if="item.fixedabled"v-model="item.fixed"@freeze="onFreeze"></icon-freeze><icon-filterv-if="item.filterabled"v-model="item.filter":filters="onFilters({ item, attr })"@filter="onFilter"></icon-filter><icon-hidev-if="item.hiddenabled"v-model="item.hidden"@hide="onHide"></icon-hide></template></template></template><template slot-scope="scope"><slot :name="item.key" v-bind="scope" :item="item" :attr="attr"><template v-if="attr.is"><componentv-if="attr.is === 'el-dict-tag'"v-bind="attr":size="$attrs.size":value="scope.row[item.key]":options="dict.type[attr.dictName]"></component><componentv-else-if="attr.is === 'el-popover-select-v2'"v-bind="attr"v-model="scope.row[item.key]":title="item.title":size="$attrs.size":source.sync="scope.row"></component><componentv-else-if="attr.is === 'el-popover-multiple-select-v2'"v-bind="attr"v-model="scope.row[item.key]":title="item.title":size="$attrs.size":source.sync="scope.row"></component><componentv-else-if="attr.is === 'el-select'"v-bind="attr"v-model="scope.row[item.key]":size="$attrs.size"><template><el-optionv-for="item in dict.type[attr.dictName]":key="item.value":label="item.label":value="item.value"></el-option></template></component><componentv-elsev-bind="attr"v-model="scope.row[item.key]":size="$attrs.size"style="width: 100%"></component></template><template v-else><component v-if="attr.formatter" is="span">{{attr.formatter(scope.row)}}</component><component v-else is="span">{{scope.row[item.key] || "--"}}</component></template></slot></template></ux-table-column><slot></slot><!-- </el-table> --></ux-grid><divstyle="height: 50px;display: flex;justify-content: space-between;align-items: center;":style="{height: checkbox || pagination ? '50px' : '0px',}"><div class="mr-4"><template v-if="convenitentOperation"><button-hide v-model="innerColumns" @change="onHide"></button-hide></template></div><paginationv-if="pagination"v-show="!selectState":total="page.total":page.sync="page.pageNum":limit.sync="page.pageSize"@pagination="$emit('pagination', { ...$event })"style="height: 32px; padding: 0 !important; flex: 1; overflow-x: auto"/></div></div>
</template><style lang="scss" 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-model="materialInfo[item.key]":dict="dict":ref="tabName":columns="columns":size="$attrs.size":height="420"><!-- 判断是否禁用 --><template slot="drug" slot-scope="scope"><componentv-bind="scope.attr"v-model="scope.row[scope.item.key]":size="$attrs.size":source.sync="scope.row":disabled="!(scope.row.medicineMaterial === '0')"><el-optionv-for="item in dict.type[scope.attr.dictName]":key="item.value":label="item.label":value="item.value"></el-option></component></template><template slot="registrationNo" slot-scope="scope"><componentv-bind="scope.attr"v-model="scope.row[scope.item.key]":size="$attrs.size":source.sync="scope.row":disabled="!(scope.row.medicineMaterial === '0')"></component></template><ux-table-columnfixed="right"title="操作"width="120"align="center"><template slot="header" slot-scope="scope"><el-buttontype="text":size="$attrs.size"@click="useRowAdd(tabName)">增行</el-button></template><template slot-scope="scope"><el-buttontype="text":size="$attrs.size"@click.native.prevent="useRowRemove(tabName, scope)">删除</el-button><AmendantRecordv-if="tabName === 'materialBasic' &&addType === 'edit' &&scope.row.id"v-model="scope.row"></AmendantRecord></template></ux-table-column></el-super-ux-table>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/198156.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

基于Java SSM框架实现汽车在线销售系统项目【项目源码+论文说明】计算机毕业设计

基于Java SSM框架实现汽车在线销售系统项目【项目源码+论文说明】计算机毕业设计

基于java的SSM框架实现汽车在线销售系统演示 摘要 21世纪的今天&#xff0c;随着社会的不断发展与进步&#xff0c;人们对于信息科学化的认识&#xff0c;已由低层次向高层次发展&#xff0c;由原来的感性认识向理性认识提高&#xff0c;管理工作的重要性已逐渐被人们所认识&a…
阅读更多...
3.2.1.0 发布！时间转换函数+BI 集成+视图正式上线！

3.2.1.0 发布！时间转换函数+BI 集成+视图正式上线！

自 3.0 版本发布以来&#xff0c;经过研发人员和社区用户的不断努力&#xff0c;TDengine 进行了大量更新&#xff0c;产品稳定性和易用性也在不断提升。近日&#xff0c;TDengine 3.2.1.0 成功发布&#xff0c;该版本带来了一些重大功能优化&#xff0c;这些优化将进一步提升 …
阅读更多...
spark sql基于CBO的优化

spark sql基于CBO的优化

前言 spark sql基于CBO的优化是建立在物理计划层面的&#xff0c;原理是计算出所有可能的物理执行计划&#xff0c;并挑选成代价最小的物理执行计划。对于执行计划可以去看我的另一篇博客RBO优化 CBO的话主要用来调整inner join所涉及表的顺序 使用CBO准备 搜集所需表和列的…
阅读更多...
Leetcode每日一题学习训练——Python3版（从二叉搜索树到更大和树）

Leetcode每日一题学习训练——Python3版（从二叉搜索树到更大和树）

版本说明 当前版本号[20231204]。 版本修改说明20231204初版 目录 文章目录 版本说明目录从二叉搜索树到更大和树理解题目代码思路参考代码 原题可以点击此 1038. 从二叉搜索树到更大和树 前去练习。 从二叉搜索树到更大和树 给定一个二叉搜索树 root (BST)&#xff0c;请…
阅读更多...
VUE2+THREE.JS 按照行动轨迹移动人物模型并相机视角跟随人物

VUE2+THREE.JS 按照行动轨迹移动人物模型并相机视角跟随人物

按照行动轨迹移动人物模型并相机视角跟随人物 1. 初始化加载模型2. 开始移动模型3. 人物模型启动4. 暂停模型移动5. 重置模型位置6. 切换区域动画7. 摄像机追踪模型8. 移动模型位置9.动画执行 人物按照上一篇博客所设定的关键点位置&#xff0c;匀速移动 1. 初始化加载模型 //…
阅读更多...
我的计算机专业之旅：激情、挑战与无尽可能性

我的计算机专业之旅：激情、挑战与无尽可能性

标题&#xff1a;我的计算机专业之旅&#xff1a;激情、挑战与无尽可能性 引言&#xff1a; 回顾过去的三年&#xff0c;我深深感受到计算机专业给我带来的激情、挑战以及无尽的可能性。作为一名大三的计算机专业学生&#xff0c;我想分享一下当初选择这条专业之路的初衷和心…
阅读更多...
短信验证码轰炸解决方案二(防止海外ip、限制ip、限制手机号次数解决)

短信验证码轰炸解决方案二(防止海外ip、限制ip、限制手机号次数解决)

1. 检查IP是否在黑名单中&#xff0c;如果是则终止访问。 2. 检查手机号是否在黑名单中&#xff0c;如果是则终止访问。 3. 对于同一个IP&#xff0c;限制访问次数&#xff0c;如果超过限制则终止访问。 4. 对于同一个手机号&#xff0c;限制访问次数&#xff0c;如果超过限制则…
阅读更多...
〖大前端 - 基础入门三大核心之JS篇㊸〗- DOM事件对象的方法

〖大前端 - 基础入门三大核心之JS篇㊸〗- DOM事件对象的方法

说明&#xff1a;该文属于 大前端全栈架构白宝书专栏&#xff0c;目前阶段免费&#xff0c;如需要项目实战或者是体系化资源&#xff0c;文末名片加V&#xff01;作者&#xff1a;不渴望力量的哈士奇(哈哥)&#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作&#xf…
阅读更多...
高铁乘务员简历12篇

高铁乘务员简历12篇

想要在高铁乘务员职位的求职中脱颖而出&#xff0c;顺利进入心仪的高铁乘务员岗位&#xff0c;以下是12篇专业的高铁乘务员个人简历案例&#xff0c;无论您是初入行业的新手还是有一定工作经验的乘务员参考这些简历&#xff0c;让您的求职之路更加顺畅。 高铁乘务员简历模板下…
阅读更多...
3D Gaussian Splatting的使用

3D Gaussian Splatting的使用

3D Gaussian Splatting的使用 1 下载与安装2 准备场景样本2.1 准备场景照片2.1.1 采集图片2.1.2 生成相机位姿 3 训练4 展示 1 下载与安装 今年SIGGRAPH最佳论文&#xff0c;学习了一下&#xff0c;果然厉害&#xff0c;具体论文原理就不说了&#xff0c;一搜都有&#xff0c;…
阅读更多...
2023年12月5日历史上的今天大事件早读

2023年12月5日历史上的今天大事件早读

1377年12月05日明朝第二位皇帝明惠帝朱允炆出生 1408年12月05日金帐汗国军队在亦敌忽率领下进抵莫斯科城下 1492年12月05日欧洲航海家哥伦布第一次踏上伊斯帕尼奥拉岛 1791年12月05日音乐神童莫扎特逝世 1847年12月05日广州黄竹岐人民抗英 1870年12月05日法国著名作家大仲…
阅读更多...
第N个泰波那锲数

第N个泰波那锲数

1.题目解析 动态规划算法原理 1.状态表示 2.状态转移方程 3.初始化 4.填表顺序 为了填写当前状态的时候&#xff0c;所需要的状态已经计算过了&#xff01;&#xff01;&#xff01; 5.返回值 题目要求 状态表示 ------------------------------------------------------…
阅读更多...
vant4 van-tabs和van-popup一起使用样式错误

vant4 van-tabs和van-popup一起使用样式错误

问题现象&#xff1a;van-cell的宽度被撑出屏幕宽度 今天做一个tab切换页面&#xff0c;偶然发现这个问题&#xff0c;记录一下。 问题背景&#xff1a; 前提是已经定了框架vue3vant4 那么做tab页面首先是用到了van-tabs&#xff0c;然后很自然的给它加了animated属性&#xff…
阅读更多...
Cannot read properties of null (reading ‘setAttribute‘)

Cannot read properties of null (reading ‘setAttribute‘)

做项目时候&#xff0c;总是报这个错&#xff0c;参考如下链接解决问题&#xff0c;在此记录下&#xff0c;防止忘记。 报错 Uncaught TypeError: Cannot read properties of null (reading ‘setAttribute‘)_三水木雨的博客-CSDN博客
阅读更多...
【C/PTA —— 14.结构体1（课外实践）】

【C/PTA —— 14.结构体1（课外实践）】

C/PTA —— 14.结构体1&#xff08;课外实践&#xff09; 一.函数题6-1 选队长6-2 按等级统计学生成绩6-3 学生成绩比高低6-4 综合成绩6-5 利用“选择排序算法“对结构体数组进行排序6-6 结构体的最值6-7 复数相乘运算 二.编程题7-5 一帮一7-6 考试座位号 一.函数题 6-1 选队长…
阅读更多...
Git篇如何搭建自己的git仓库

Git篇如何搭建自己的git仓库

搭建自己的Git仓库需要以下步骤&#xff1a; 安装Git&#xff1a;首先需要在你的计算机上安装Git。你可以从Git官方网站下载并安装适合你操作系统的版本。创建新的Git仓库&#xff1a;在命令行中输入以下命令来创建一个新的Git仓库&#xff1a; mkdir my_project cd my_proje…
阅读更多...
51综合程序04-ADC0808与DAC0808的应用

51综合程序04-ADC0808与DAC0808的应用

文章目录 一、ADC0808调温报警器1. 简单介绍2. 电路连接图3. 源代码4. 实验效果 二、DAC0808直流电机调速器1. 简单介绍2. 电路连接图3. 源代码4. 实验效果 一、ADC0808调温报警器 1. 简单介绍 ADC0808 是一款 8 位模数转换器&#xff08;Analog-to-Digital Converter&#x…
阅读更多...
【教3妹学编程-算法题】到达首都的最少油耗

【教3妹学编程-算法题】到达首都的最少油耗

3妹&#xff1a;“太阳当空照&#xff0c;花儿对我笑&#xff0c;小鸟说早早早&#xff0c;你为什么背上炸药包” 2哥 :3妹&#xff0c;什么事呀这么开发。 3妹&#xff1a;2哥你看今天的天气多好啊&#xff0c;阳光明媚、万里无云、秋高气爽&#xff0c;适合秋游。 2哥&#x…
阅读更多...
MybatisPlus中的使用Wrapper自定义SQL

MybatisPlus中的使用Wrapper自定义SQL

一、条件构造器 条件构造器提供了一种更加简洁和直观的方式来构建复杂的查询条件。它提供了一组静态方法&#xff0c;用于构建各种类型的查询条件&#xff0c;包括等于、不等于、大于、小于、包含等。使用条件构造器可以避免手动拼接SQL语句的麻烦&#xff0c;提高代码的可读性…
阅读更多...
解决 Xshell 无法使用 root 账户远程登录 Linux 的问题

解决 Xshell 无法使用 root 账户远程登录 Linux 的问题

文章目录 问题描述问题原因解决办法 笔者出问题时的运行环境&#xff1a; Red Hat Enterprise Linux 9.2 x86_64 Xshell 7 问题描述 笔者在新安装的 Red Hat Enterprise Linux 中发现一个问题。在 RHEL 安装完之后&#xff0c;无法在 Xshell 中使用 root 账户远程登录此 Lin…
阅读更多...
最新文章

Copyright @ 2022~2023