el-table 表格多选(后端接口搜索分页)实现已选中的记忆功能。实现表格数据和已选数据（前端分页）动态同步更新。

 实现效果：（可拉代码下来看：vue-demo: vueDemo）

左侧表格为点击查询调用接口查询出来的数据，右侧表格为左侧表格所有选择的数据，由前端实现分页。

两个el-table勾选数据联动更新

实现逻辑：

el-table表格的selection-change方法（element组件的table表格）结合分页组件，自定义一个用于存储（左侧表格）当前页的已勾选数据；一个用于存储所勾选的所有数据（右侧表格所有数据）；一个用于存储（右侧表格）当前页的展示数据。

代码实现：

 所有代码：

<template><div><Search v-show="showSearch" label-width="100" :limit-height-param="false" @search="handleQuery" @clear="resetQuery"><div><span class="label">账号名称</span><el-selectv-model="queryParams.companyCodeList"placeholder="请选择账号名称"clearablefilterabledefault-first-optionmultiplesize="small"><el-optionv-for="item in companyCodeOptions":key="item.dictValue":label="`${item.dictLabel} | ${item.dictValue}`":value="item.dictValue"></el-option></el-select></div><div><span class="label">账户类型</span><el-selectv-model="queryParams.accountType"placeholder="请选择账户类型"clearablefilterabledefault-first-optionsize="small"><el-optionv-for="dict in accountTypeOptions":key="dict.dictValue":label="dict.dictLabel":value="dict.dictValue"></el-option></el-select></div><div><span class="label">银行卡号</span><el-inputv-model="queryParams.cardNum"placeholder="请输入银行卡号"clearablesize="small"@keyup.enter.native="handleQuery"/></div></Search><el-row :gutter="20"><el-col :span="12"><el-tablev-loading="tableLoading"ref="multipleTable":data="tableData":stripe="true":row-key="getRowKeys":row-style="{height: '54px'}"@selection-change="handleSelectionChange"><el-table-column type="selection" align="center" width="55" fixed /><el-table-column label="序号" type="index" align="center" width="55" fixed /><el-table-column label="公司名称" prop="companyCode" :formatter="tableFormat" align="center" min-width="120" show-overflow-tooltip /><el-table-column label="bankAccountId" prop="bankAccountId" align="center" min-width="130" show-overflow-tooltip /><el-table-column label="账户类型" prop="accountType" :formatter="tableFormat" align="center" min-width="100" show-overflow-tooltip /><el-table-column label="银行卡号" prop="cardNum" align="center" min-width="220" show-overflow-tooltip /><template v-for="(column, columIndex) in tableColumnOption"><el-table-column:key="columIndex":prop="column.prop":label="column.label":min-width="column.width":fixed="column.fixed || false":align="column.align || 'center'":sortable="column.sortable || false":index="columIndex":show-overflow-tooltip="column.tooltip || true"><!-- v-for="(column, columIndex) in tableColumnOption" --><template slot-scope="scope"><span v-if="column.prop === 'status'"><el-tag v-if="scope.row.status == 0" type="danger">禁用</el-tag><el-tag v-else-if="scope.row.status == 1" type="success">启用</el-tag></span><span v-else-if="column.prop === 'type'"><el-tag v-if="scope.row.type == 1">type1</el-tag><el-tag v-if="scope.row.type == 0" type="success">type0</el-tag></span><span v-else>{{ scope.row[column.prop] }}</span></template></el-table-column></template></el-table><paginationv-show="total > 0":total="total":page.sync="queryParams.pageNum":limit.sync="queryParams.pageSize":page-sizes="[3, 5, 10, 20, 30, 50]":pagerCount="5"@pagination="getList"/></el-col><el-col :span="12"><el-tablev-loading="tableLoading"ref="selectMultipleTable":data="selectTableData":row-style="{height: '54px'}"><el-table-column label="序号" type="index" align="center" width="55" fixed /><el-table-column label="账户名称" prop="companyCode" :formatter="tableFormat" align="center" min-width="120" show-overflow-tooltip /><el-table-column label="bankAccountId" prop="bankAccountId" align="center" min-width="130" show-overflow-tooltip /><el-table-column label="账户类型" prop="accountType" :formatter="tableFormat" align="center" min-width="100" show-overflow-tooltip /><el-table-column label="银行卡号" prop="cardNum" align="center" min-width="220" show-overflow-tooltip /><el-table-columnlabel="操作"align="center"fixed="right"width="100"><template slot-scope="scope"><el-buttonclass="delBtn"size="small"type="text"icon="el-icon-delete"@click="handleDelete(scope.row)">删除</el-button></template></el-table-column></el-table><paginationv-show="selectTotal > 0":total="selectTotal":page.sync="pageNum":limit.sync="pageSize":page-sizes="[3, 5, 10, 20, 30, 50]":pagerCount="5"@pagination="getSelectList"/></el-col></el-row></div>
</template><script>
import Search from '@/components/Search/index'
import {deepClone,
} from '@/utils'
import {getDepartmentsList
} from '@/api/tableLinkage'
import {geBasicAccountType,geBasicCompany,
} from '@/api/selectList'export default {components: {Search,},data() {return {// 遮罩层// loading: false,tableLoading: false,// 显示搜索条件showSearch: true,// 查询参数queryParams: {pageNum: 1,pageSize: 10,companyCodeList: [],cardNum: null,accountType: null,},companyCodeOptions: [],accountTypeOptions: [],codeBsOptions: [],allDataScopeOptions: [{dictValue: '1',dictLabel: '是'},{dictValue: '0',dictLabel: '否'}],total: 0, // 搜索表格（左侧）总条数selectTotal: 0, // 勾选表格（右侧）总条数pageNum: 1, // 勾选表格（右侧）当前页码pageSize: 10, // 勾选表格（右侧）每页数量tableData: [], // 搜索表格（左侧）数据selectedData: [], // 所勾选的所有数据selectTableData: [],  // 勾选表格（右侧）当前页展示的数据multipleSelection: [],  // 当前页选中的数据idKey: 'bankAccountId', // 标识列表数据中每一行的唯一键的名称// idKey: 'id', // 标识列表数据中每一行的唯一键的名称tableColumnOption: [{prop: 'preview',label: 'preview',width: '200',},{prop: 'status',label: 'status',width: '200',},{prop: 'jobType',label: 'jobType',width: '200',},{prop: 'type',label: 'type',width: '200',},],columnOption: [// { selection: true },// { type: 'index' },// {prop: 'name', label: '名称', width: 160},// { slot: 'action', label: '操作' }],}},created () {// 若初始就有选中数据，需要对选中数据分页// this.selectedData = [...]// this.handleSelectListPaging()this.geBasicAccountType()this.geBasicCompany()this.getList()},methods: {geBasicAccountType () {geBasicAccountType().then(res => {this.accountTypeOptions = res.data})},geBasicCompany () {geBasicCompany().then(res => {this.companyCodeOptions = res.data})},getList () {this.tableLoading = truegetDepartmentsList(this.queryParams).then(res => {console.log("🚀 ~ file: index.vue:24 ~ getDepartmentsList ~ res:", res)// console.log(res.data)this.tableData = res?.rows || []this.total = res?.total || 0// this.handleSelectListPaging()this.$nextTick(() => {// 设置选中this.setSelectRow()})this.tableLoading = false}).catch(() => { this.tableLoading = false })},/** 搜索按钮操作 */handleQuery() {this.queryParams.pageNum = 1this.getList()},/** 重置按钮操作 */resetQuery() {this.queryParams = this.$options.data().queryParamsthis.handleQuery()},tableFormat(row, { property }, value) {return this.selectDictLabel(this[`${property}Options`], value)},// 对表格数据分页getSelectList() {const start = Math.ceil(((this.pageNum - 1) * this.pageSize).toFixed(0)),end = Math.ceil((start + this.pageSize).toFixed(2))this.selectTableData = this.selectedData.slice(start >= 0 ? start : 0, end)// this.$refs.selectMultipleTable.bodyWrapper.scrollTo(0, 0)},handleSelectListPaging() {// 前端分页选中数据表格（左侧表格）this.selectTotal = this.selectedData.length// 总页数=（总数 - 1）/ 每页数量 + 1// 总页数=（总数 + 每页数量 - 1）/ 每页数量// 总页数 = Math.ceil(总条数 / 每页数量)// 使用Math.ceil()函数，返回大于或者等于指定表达式的最小整数，进1法取整const totalPage = Math.ceil(this.selectTotal / this.pageSize)// 原页码大于现数据的总页数，页码取总页数的值this.pageNum = this.pageNum > totalPage ? totalPage : this.pageNum// 页码最小值为1this.pageNum = this.pageNum < 1 ? 1 : this.pageNum// 对表格数据分页this.getSelectList()},// 设置选择表格行唯一标识getRowKeys(row) {return row[this.idKey]},// 设置选中的方法setSelectRow() {if (!this.selectedData || this.selectedData.length <= 0) {return}// 标识当前行的唯一键的名称let idKey = this.idKey// 获取所有选中数据的idconst selectAllIds = this.selectedData.map(row => row[idKey]) || []console.warn("🚀 ~ file: dataAuthenticationUpdateDetail.vue:558 ~ setSelectRow ~ selectAllIds:", selectAllIds)this.$refs.multipleTable.clearSelection() // 先清空原有选中数据this.tableData.forEach(item => {// 查找当前页中是否包含所有选中数据中的id，存在则设置选中（触发 handleSelectionChange ，进而触发记忆选择核心方法 changePageCoreRecordData）if (selectAllIds.indexOf(item[idKey]) >= 0) {this.$refs.multipleTable.toggleRowSelection(item, true)}})},// 多选框选中数据handleSelectionChange(selection) {this.multipleSelection = selectionthis.$nextTick(() => {this.changePageCoreRecordData()})},// 记忆选择核心方法(操作搜索表格——左侧，联动改变勾选表格——右侧)async changePageCoreRecordData() {// 标识当前行的唯一键的名称let idKey = this.idKey// 如果总记忆中还没有选择的数据，那么就直接取当前页选中的数据，不需要后面一系列计算if (this.selectedData.length <= 0) {this.selectedData = this.multipleSelection// 前端分页this.handleSelectListPaging()return}// 总选择里面的key集合const selectAllIds = this.selectedData.map(row => row[idKey]) || []// 获取当前页选中的idlet selectIds = []this.multipleSelection.forEach(row => {selectIds.push(row[idKey])// 如果总选择里面不包含当前页选中的数据，那么就加入到总选择集合里// （左侧表格勾选数据，加入到右侧表格中）if (selectAllIds.indexOf(row[idKey]) < 0) {this.selectedData.push(row)}})// 得到当前页没有选中的idlet noSelectIds = []this.tableData.map(row => {if (selectIds.indexOf(row[idKey]) < 0) {noSelectIds.push(row[idKey])}})noSelectIds.map(id => {if (selectAllIds.indexOf(id) >= 0) {for (let i = 0; i < this.selectedData.length; i++) {if (this.selectedData[i][idKey] === id) {console.warn('总选择中有未被选中的，那么就删除这条:', id)// 如果总选择中有未被选中的，那么就删除这条// （左侧表格取消勾选数据，从右侧表格中删除这条数据）this.selectedData.splice(i, 1)break}}}})// 前端分页this.handleSelectListPaging()},// 删除handleDelete(row) {// 标识当前行的唯一键的名称let idKey = this.idKey// 过滤所有选中数据，将要删除的这条数据过滤掉this.selectedData = this.selectedData.filter(item => {return item[idKey] !== row[idKey]})// 查找当前页是否存在需要删除的这条数据const findRow = this.tableData.find(item => { return row[idKey] === item[idKey] })if (findRow) {// 当前页存在要删除的这条数据，取消选中状态// （触发 handleSelectionChange ，进而触发记忆选择核心方法 changePageCoreRecordData）this.$refs.multipleTable.toggleRowSelection(findRow)} else {// 当前页不存在需要删除的这条数据，直接调用前端分页方法，对所有选中数据（已剔除需要删除的这条数据）重新进行分页this.handleSelectListPaging()}},// 处理参数handleParams() {const param = deepClone(this.form)const bankAccountIdList = this.selectedData.map(item => item.bankAccountId)const params = {id: param.id,codeBs: param.codeBs,allDataScope: param.allDataScope,bankAccountIdList: bankAccountIdList}return params},}
}
</script><style>
</style>

关键步骤：

 

当点击搜索查询左侧数据、或切换分页、切换页面大小，调用后端接口（this.getList()）的时候，需要调用选中方法(this.setSelectRow())：

// 设置选中的方法setSelectRow() {if (!this.selectedData || this.selectedData.length <= 0) {return}// 标识当前行的唯一键的名称let idKey = this.idKey// 获取所有选中数据的idconst selectAllIds = this.selectedData.map(row => row[idKey]) || []console.warn("🚀 ~ file: dataAuthenticationUpdateDetail.vue:558 ~ setSelectRow ~ selectAllIds:", selectAllIds)this.$refs.multipleTable.clearSelection() // 先清空原有选中数据this.tableData.forEach(item => {// 查找当前页中是否包含所有选中数据中的id，存在则设置选中// （触发 handleSelectionChange ，进而触发记忆选择核心方法 changePageCoreRecordData）if (selectAllIds.indexOf(item[idKey]) >= 0) {this.$refs.multipleTable.toggleRowSelection(item, true)}})},

设置选中方法，先清空左侧表格原有选中数据，然后根据右侧表格所有选中数据的id(自己设定的key)来判断右侧表格当前页是否存在选中数据，存在则调用el-table的toggleRowSelection方法，将数据勾选上。（toggleRowSelection方法会触发el-table的selection-change【即触发handleSelectionChange】进而触发记忆选择核心方法 changePageCoreRecordData）

// 多选框选中数据handleSelectionChange(selection) {this.multipleSelection = selectionthis.$nextTick(() => {this.changePageCoreRecordData()})},

勾选右侧表格数据触发记忆选择核心方法 changePageCoreRecordData：

// 记忆选择核心方法(操作搜索表格——左侧，联动改变勾选表格——右侧)async changePageCoreRecordData() {// 标识当前行的唯一键的名称let idKey = this.idKey// 如果总记忆中还没有选择的数据，那么就直接取当前页选中的数据，不需要后面一系列计算if (this.selectedData.length <= 0) {this.selectedData = this.multipleSelection// 前端分页this.handleSelectListPaging()return}// 总选择里面的key集合const selectAllIds = this.selectedData.map(row => row[idKey]) || []// 获取当前页选中的idlet selectIds = []this.multipleSelection.forEach(row => {selectIds.push(row[idKey])// 如果总选择里面不包含当前页选中的数据，那么就加入到总选择集合里// （左侧表格勾选数据，加入到右侧表格中）if (selectAllIds.indexOf(row[idKey]) < 0) {this.selectedData.push(row)}})// 得到当前页没有选中的idlet noSelectIds = []this.tableData.map(row => {if (selectIds.indexOf(row[idKey]) < 0) {noSelectIds.push(row[idKey])}})noSelectIds.map(id => {if (selectAllIds.indexOf(id) >= 0) {for (let i = 0; i < this.selectedData.length; i++) {if (this.selectedData[i][idKey] === id) {console.warn('总选择中有未被选中的，那么就删除这条:', id)// 如果总选择中有未被选中的，那么就删除这条// （左侧表格取消勾选数据，从右侧表格中删除这条数据）this.selectedData.splice(i, 1)break}}}})// 前端分页this.handleSelectListPaging()},

        

        如果总记忆中还没有选择的数据，那么就直接取当前页选中的数据，不需要后面一系列计算。

        如果已经有已选择的数据了，则先获取当前页选中数据的值集，获取当前页没有选中的数据的值集。如果总选择里面不包含当前页选中的数据，那么就将这些数据加入到总选择集合里（左侧表格勾选数据，加入到右侧表格中）。如果总选择中有未被选中的数据，那么就从总选择表格中删除这些数据（左侧表格取消勾选数据，从右侧表格中删除这条数据）。

        这里经过上述计算后，得到最新的右侧表格全部数据，这时就需要对右侧表格重新分页：

（涉及到总页面数的计算，看这里Javascript 前端分页——根据页面大小（pageSize）和总行数（total）计算总页面数（totalPage）-CSDN博客）

// 对表格数据分页getSelectList() {const start = Math.ceil(((this.pageNum - 1) * this.pageSize).toFixed(0)),end = Math.ceil((start + this.pageSize).toFixed(2))this.selectTableData = this.selectedData.slice(start >= 0 ? start : 0, end)// this.$refs.selectMultipleTable.bodyWrapper.scrollTo(0, 0)},handleSelectListPaging() {// 前端分页选中数据表格（左侧表格）this.selectTotal = this.selectedData.length// 总页数=（总数 - 1）/ 每页数量 + 1// 总页数=（总数 + 每页数量 - 1）/ 每页数量// 总页数 = Math.ceil(总条数 / 每页数量)// 使用Math.ceil()函数，返回大于或者等于指定表达式的最小整数，进1法取整const totalPage = Math.ceil(this.selectTotal / this.pageSize)// 原页码大于现数据的总页数，页码取总页数的值this.pageNum = this.pageNum > totalPage ? totalPage : this.pageNum// 页码最小值为1this.pageNum = this.pageNum < 1 ? 1 : this.pageNum// 对表格数据分页this.getSelectList()},

        前面已经讲了左侧表格勾选，取消勾选时，对右侧表格的联动改变。下面来讲，右侧表格删除一条数据，如何让左侧表格取消勾选。其实也很简单，就是从右侧表格全部数据中，将要删除的数据去掉，若这条数据在左侧表格当前页存在，则触发el-table的toggleRowSelection(row,false)方法，取消勾选。若这条数据左侧表格在当前页不存在，则直接对右侧表格重新分页就好了。因为下次当左侧表格重新调用getList()方法（触发记忆选择核心方法 changePageCoreRecordData）的时候，右侧表格内已经没有要删除的数据了。

// 删除handleDelete(row) {// 标识当前行的唯一键的名称let idKey = this.idKey// 过滤所有选中数据，将要删除的这条数据过滤掉this.selectedData = this.selectedData.filter(item => {return item[idKey] !== row[idKey]})// 查找当前页是否存在需要删除的这条数据const findRow = this.tableData.find(item => { return row[idKey] === item[idKey] })if (findRow) {// 当前页存在要删除的这条数据，取消选中状态// （触发 handleSelectionChange ，进而触发记忆选择核心方法 changePageCoreRecordData）this.$refs.multipleTable.toggleRowSelection(findRow)} else {// 当前页不存在需要删除的这条数据，直接调用前端分页方法，对所有选中数据（已剔除需要删除的这条数据）重新进行分页this.handleSelectListPaging()}},

参考文章：

element的table表格多选结合分页实现已选中的记忆功能和实现表格数据和已选数据动态同步更新_element table分页多选-CSDN博客

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

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

相关文章

低代码开发到底是补品还是垃圾食品？

低代码开发到底是补品还是垃圾食品？

2023&#xff0c;低代码彻底火了&#xff0c;甚至火到没有点相关经验&#xff0c;都不好意思出去面试的程度。 从业者对低代码的发展充满了想象&#xff0c;都认为未来低代码的商业价值不可估量。 据Gartner的最新报告显示&#xff0c;2023年全球低代码开发技术市场规模预计将…
阅读更多...
内部文件上传以及渲染-接口API

内部文件上传以及渲染-接口API

文件上传 地址http://172.16.0.118:8090/api/pm/base/affix/upload请求类型POSTContent-Type:text/plain;charsetutf-8参数 prjData {"prjId":"", "jobId":"3031b2c8-c809-4110-8e88-22c80a9c1ec0721aca89-96a1-4346-9b6e-022331d221d1Nec…
阅读更多...
【EMNLP 2023】面向Stable Diffusion的自动Prompt工程算法BeautifulPrompt

【EMNLP 2023】面向Stable Diffusion的自动Prompt工程算法BeautifulPrompt

近日&#xff0c;阿里云人工智能平台PAI与华南理工大学朱金辉教授团队合作在自然语言处理顶级会议EMNLP2023上发表了BeautifulPrompt的深度生成模型&#xff0c;可以从简单的图片描述中生成高质量的提示词&#xff0c;从而使文生图模型能够生成更美观的图像。BeautifulPrompt通…
阅读更多...
【MATLAB】MODWT分解+FFT+HHT组合算法

【MATLAB】MODWT分解+FFT+HHT组合算法

有意向获取代码&#xff0c;请转文末观看代码获取方式~也可转原文链接获取~ 1 基本定义 MODWT分解FFTHHT组合算法是一种综合性的信号处理方法&#xff0c;它结合了经验小波变换&#xff08;Empirical Wavelet Transform&#xff0c;EWT&#xff09;、快速傅里叶变换&#xff…
阅读更多...
爱智EdgerOS之深入解析如何应用爱智的视频流模块完成拉流

爱智EdgerOS之深入解析如何应用爱智的视频流模块完成拉流

一、ONVIF 规范和常见视频流传输协议 ① ONVIF 规范 随着视频监控产业链的成熟&#xff0c;市面上陆陆续续出现了各式各样的网络摄像设备&#xff0c;这些设备都需要通讯协议才能进行数据传输。早期厂商都采用私有协议&#xff0c;但是现在厂商分工明确&#xff0c;有的负责生…
阅读更多...
程序员的技术成长攻略

程序员的技术成长攻略

推荐语&#xff1a;偶尔在公众号看到的一篇文章&#xff0c;写的非常好&#xff0c;在此分享给各位程序员兄弟&#xff0c;不光是对技术成长有帮助&#xff0c;其他领域也是同样适用的&#xff01;建议反复阅读&#xff0c;形成一套自己的技术成长策略。 原文地址&#xff1a;…
阅读更多...
【EI会议征稿】2024年粤港澳大湾区数字经济与人工智能国际学术会议(DEAI2024)

【EI会议征稿】2024年粤港澳大湾区数字经济与人工智能国际学术会议(DEAI2024)

2024年粤港澳大湾区数字经济与人工智能国际学术会议(DEAI2024) 2024 Guangdong-Hong Kong-Macao Greater Bay Area International Conference on Digital Economy and Artificial Intelligence(DEAI2024) 2024年粤港澳大湾区数字经济与人工智能国际学术会议(DEAI2024)由广东科…
阅读更多...
探索鸿蒙 TextInput组件

探索鸿蒙 TextInput组件

TextInput 根据组件名字&#xff0c;可以得知他是一个文本输出框。 声明代码&#x1f447; TextInput({placeholder?:ResourceStr,text?:ResourceStr}); placeholder: 就是提示文本&#xff0c;跟网页开发中的placeholder一样的 text&#xff1a;输入框当前的文本内容 特殊属…
阅读更多...
52 代码审计-PHP项目类RCE及文件包含下载删除

52 代码审计-PHP项目类RCE及文件包含下载删除

目录 漏洞关键字:演示案例:xhcms-无框架-文件包含跨站-搜索或应用-includeearmusic-无框架-文件下载-搜索或应用功能-down等zzzcms-无框架-文件删除RCE-搜索或应用-unlink、eval 漏洞关键字: SQL注入&#xff1a; select insert update mysql_query mysql等 文件上传&#xff…
阅读更多...
【FreeRTOS】信号量——简介、常用API函数、注意事项、项目实现

【FreeRTOS】信号量——简介、常用API函数、注意事项、项目实现

在FreeRTOS中&#xff0c;信号量是一种非常重要的同步机制&#xff0c;用于实现任务间的互斥访问和同步操作。通过信号量&#xff0c;不同的任务可以安全地共享资源&#xff0c;避免竞争和冲突&#xff0c;从而确保系统的稳定性和可靠性。本篇博客将介绍FreeRTOS中信号量的基本…
阅读更多...
使用Huggingface创建大语言模型RLHF训练流程的完整教程

使用Huggingface创建大语言模型RLHF训练流程的完整教程

ChatGPT已经成为家喻户晓的名字&#xff0c;而大语言模型在ChatGPT刺激下也得到了快速发展&#xff0c;这使得我们可以基于这些技术来改进我们的业务。 但是大语言模型像所有机器/深度学习模型一样&#xff0c;从数据中学习。因此也会有garbage in garbage out的规则。也就是说…
阅读更多...
AUTOSAR CP Int-Watchdog简介

AUTOSAR CP Int-Watchdog简介

Int Watchdog 1 简介2 EB 中配置 TC39X3 Wdg 在代码中使用1 简介 内部看门狗驱动[sws_Wdg_00161]要访问内部看门狗硬件，对应的 Wdg 模块实例应该直接访问看门狗服务的硬件。提示:内部看门狗驱动程序是微控制器抽象层的一部分，它允许直接的硬件访问。注意:内部看门狗的日常服…
阅读更多...
第21章总结 网络通信

第21章总结 网络通信

21.1 网络程序设计基础 网络程序设计编写的是与其他计算机进行通信的程序。Java已经将网络程序所需要的元素封装成不同的类&#xff0c;用户只要创建这些类的对象&#xff0c;使用相应的方法&#xff0c;即使不具备有关的网络知识&#xff0c;也可以编写出高质量的网络通信程序…
阅读更多...
【评测脚本】机器信息评测（初版）

【评测脚本】机器信息评测（初版）

背景 QA的实际工作过程中，除了业务相关的测试外，也会涉及到一些评测相关的工作，甚至还要做多版本、多维度的评估分析。尤其是现在火热的大模型，相关的评测内容更是核心中的核心。当然本文的内容只是做一些初级的机器相关的评测信息，更多更广的评测需要更多时间的积累和总…
阅读更多...
JVM的内存结构详解「重点篇」

JVM的内存结构详解「重点篇」

一、JVM虚拟机数据区 虚拟机栈 1、 线程私有 2、 每个方法被执行的时候都会创建一个栈帧用于存储局部变量表&#xff0c;操作栈&#xff0c;动态链接&#xff0c;方法出口等信息。每一个方法被调用的过程就对应一个栈帧在虚拟机栈中从入栈到出栈的过程。 3、栈帧: 是用来存储…
阅读更多...
安装mysql数据库

安装mysql数据库

1.1下载APT存储库&#xff08;下载链接&#xff09; 1.2安装APT存储库&#xff08;注意好正确的路径&#xff09; 将下载的文件传输到linux服务器对应目录下后执行以下命令&#xff1a; sudo dpkg -i mysql-apt-config_0.8.10-1_all.deb 选择mysql5.7 然后点击ok 然后执行 s…
阅读更多...
应用架构——集群、分布式、微服务的概念及异同

应用架构——集群、分布式、微服务的概念及异同

一、什么是集群&#xff1f; 集群是指将多台服务器集中在一起&#xff0c; 每台服务器都实现相同的业务&#xff0c;做相同的事&#xff1b;但是每台服务器并不是缺 一不可&#xff0c;存在的主要作用是缓解并发能力和单点故障转移问题。 集群主要具有以下特征&#xff1a; …
阅读更多...
JAVA使用POI向doc加入图片

JAVA使用POI向doc加入图片

JAVA使用POI向doc加入图片 前言 刚来一个需求需要导出一个word文档&#xff0c;文档内是系统某个界面的各种数据图表&#xff0c;以图片的方式插入后导出。一番查阅资料于是乎着手开始编写简化demo,有关参考poi的文档查阅 Apache POI Word(docx) 入门示例教程 网上大多数是XXX…
阅读更多...
el-table-column 添加 class类

el-table-column 添加 class类

正常添加class 发现没有效果 class"customClass" 发现并没有添加上去 看了一下官网发现 class-name 可以实现 第一步: :class-name"customClass" 第二步 : customClass: custom-column-class, 然后就发现可以了
阅读更多...
Qt简介、工程文件分离、创建Qt工程、Qt的帮助文档

Qt简介、工程文件分离、创建Qt工程、Qt的帮助文档

QT 简介 core&#xff1a;核心模块&#xff0c;非图形的接口类&#xff0c;为其它模块提供支持 gui&#xff1a;图形用户接口&#xff0c;qt5之前 widgets&#xff1a;图形界面相关的类模块 qt5之后的 database&#xff1a;数据库模块 network&#xff1a;网络模块 QT 特性 开…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023