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.pswp.cn/news/207366.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/207366.shtml
英文地址，請注明出處：http://en.pswp.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…
閱讀更多...
25.Oracle的回收站

25.Oracle的回收站

oracle基礎系統學習目錄 01.CentOS7靜默安裝oracle11g 02.Oracle的啟動過程 03.從簡單的sql開始 04.Oracle的體系架構 05.Oracle數據庫對象 06.Oracle數據備份與恢復 07.用戶和權限管理 08.Oracle的表 09.Oracle表的分區 10.Oracle的同義詞與序列 11.Oracle的視圖 12.Oracle的…
閱讀更多...
愛智EdgerOS之深入解析如何應用愛智的視頻流模塊完成拉流

愛智EdgerOS之深入解析如何應用愛智的視頻流模塊完成拉流

一、ONVIF 規范和常見視頻流傳輸協議 ① ONVIF 規范 隨著視頻監控產業鏈的成熟&#xff0c;市面上陸陸續續出現了各式各樣的網絡攝像設備&#xff0c;這些設備都需要通訊協議才能進行數據傳輸。早期廠商都采用私有協議&#xff0c;但是現在廠商分工明確&#xff0c;有的負責生…
閱讀更多...
程序員的技術成長攻略

程序員的技術成長攻略

推薦語&#xff1a;偶爾在公眾號看到的一篇文章&#xff0c;寫的非常好&#xff0c;在此分享給各位程序員兄弟&#xff0c;不光是對技術成長有幫助&#xff0c;其他領域也是同樣適用的&#xff01;建議反復閱讀&#xff0c;形成一套自己的技術成長策略。 原文地址&#xff1a;…
閱讀更多...
數據結構與算法：python棧和隊列的用法

數據結構與算法：python棧和隊列的用法

python的棧和隊列其實都算作一個數組&#xff0c;棧從最后一個元素開始推出&#xff0c;隊列從第一個元素開始推出 # pop(0)刪除時間復雜度O(n) s [] #棧 q [] #隊列 s.append(1)#1入棧 q.append(1)#1入隊 s.pop()#出棧 q.pop(0)#出隊由于從第一個元素刪除需要挪動數組&…
閱讀更多...
【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;輸入框當前的文本內容 特殊屬…
閱讀更多...
ChatGPT的進化史

ChatGPT的進化史

真正的人工智能可以變現的完全與人類一樣思考時&#xff0c;世界會發生什么變化&#xff1f; ChatGPT就如它的名字一樣&#xff0c;人類創造它最初的目的只是一個聊天機器人。聊天嘛&#xff0c;只要你和他對話時他的回答像人類一樣自然就行了&#xff0c;看起來并沒什么了不起…
閱讀更多...
Linux服務器磁盤占用過高解決思路

Linux服務器磁盤占用過高解決思路

服務器在運行時&#xff0c;經常出現磁盤占用過高&#xff0c;可能有如下原因&#xff1a; 1、是否有產生過大的日志文件&#xff0c;或者大文件中的log過大&#xff0c;導致磁盤占用過高&#xff1b; 2、查看磁盤占用情況&#xff0c;分析哪個目錄中文件占比最大&#xff1b; …
閱讀更多...
貝蒂的搗蛋小游戲~（C語言）

貝蒂的搗蛋小游戲~（C語言）

引言&#xff1a; 前面貝蒂已經給大家介紹了選擇&#xff0c;循環結構~&#xff0c;今天貝蒂就基于這兩種結構&#xff0c;為大家講解一種搗蛋小游戲的設計思路和方法哦。 1.游戲要求 游戲要求&#xff1a; 1. 電腦?動?成1~100的隨機數 2. 玩家猜數字&#xff0c;猜數字的過…
閱讀更多...
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中信號量的基本…
閱讀更多...
常用Nmap腳本

常用Nmap腳本

端口掃描類腳本 Nmap是一款非常流行的端口掃描工具&#xff0c;它可以幫助滲透測試工程師識別目標網絡上開放的端口&#xff0c;并提供有關這些端口的詳細信息。Nmap還提供了一系列基于腳本的功能&#xff0c;這些腳本可以擴展Nmap的功能&#xff0c;使其能夠更深入地探測目標網…
閱讀更多...
使用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的實際工作過程中，除了業務相關的測試外，也會涉及到一些評測相關的工作，甚至還要做多版本、多維度的評估分析。尤其是現在火熱的大模型，相關的評測內容更是核心中的核心。當然本文的內容只是做一些初級的機器相關的評測信息，更多更廣的評測需要更多時間的積累和總…
閱讀更多...
最新文章

Copyright @ 2022~2023