网站建设市场,WordPress接入Google,360网站建设的目标是什么,网站建设首页包括什么实现效果#xff1a;#xff08;可拉代码下来看#xff1a;vue-demo: vueDemo#xff09;
左侧表格为点击查询调用接口查询出来的数据#xff0c;右侧表格为左侧表格所有选择的数据#xff0c;由前端实现分页。 两个el-table勾选数据联动更新 实现逻辑#xff1a;
el-… 实现效果可拉代码下来看vue-demo: vueDemo
左侧表格为点击查询调用接口查询出来的数据右侧表格为左侧表格所有选择的数据由前端实现分页。 两个el-table勾选数据联动更新 实现逻辑
el-table表格的selection-change方法element组件的table表格结合分页组件自定义一个用于存储左侧表格当前页的已勾选数据一个用于存储所勾选的所有数据右侧表格所有数据一个用于存储右侧表格当前页的展示数据。 代码实现 所有代码
templatedivSearch v-showshowSearch label-width100 :limit-height-paramfalse searchhandleQuery clearresetQuerydivspan classlabel账号名称/spanel-selectv-modelqueryParams.companyCodeListplaceholder请选择账号名称clearablefilterabledefault-first-optionmultiplesizesmallel-optionv-foritem in companyCodeOptions:keyitem.dictValue:label${item.dictLabel} | ${item.dictValue}:valueitem.dictValue/el-option/el-select/divdivspan classlabel账户类型/spanel-selectv-modelqueryParams.accountTypeplaceholder请选择账户类型clearablefilterabledefault-first-optionsizesmallel-optionv-fordict in accountTypeOptions:keydict.dictValue:labeldict.dictLabel:valuedict.dictValue/el-option/el-select/divdivspan classlabel银行卡号/spanel-inputv-modelqueryParams.cardNumplaceholder请输入银行卡号clearablesizesmallkeyup.enter.nativehandleQuery//div/Searchel-row :gutter20el-col :span12el-tablev-loadingtableLoadingrefmultipleTable:datatableData:stripetrue:row-keygetRowKeys:row-style{height: 54px}selection-changehandleSelectionChangeel-table-column typeselection aligncenter width55 fixed /el-table-column label序号 typeindex aligncenter width55 fixed /el-table-column label公司名称 propcompanyCode :formattertableFormat aligncenter min-width120 show-overflow-tooltip /el-table-column labelbankAccountId propbankAccountId aligncenter min-width130 show-overflow-tooltip /el-table-column label账户类型 propaccountType :formattertableFormat aligncenter min-width100 show-overflow-tooltip /el-table-column label银行卡号 propcardNum aligncenter min-width220 show-overflow-tooltip /template v-for(column, columIndex) in tableColumnOptionel-table-column:keycolumIndex:propcolumn.prop:labelcolumn.label:min-widthcolumn.width:fixedcolumn.fixed || false:aligncolumn.align || center:sortablecolumn.sortable || false:indexcolumIndex:show-overflow-tooltipcolumn.tooltip || true!-- v-for(column, columIndex) in tableColumnOption --template slot-scopescopespan v-ifcolumn.prop statusel-tag v-ifscope.row.status 0 typedanger禁用/el-tagel-tag v-else-ifscope.row.status 1 typesuccess启用/el-tag/spanspan v-else-ifcolumn.prop typeel-tag v-ifscope.row.type 1type1/el-tagel-tag v-ifscope.row.type 0 typesuccesstype0/el-tag/spanspan v-else{{ scope.row[column.prop] }}/span/template/el-table-column/template/el-tablepaginationv-showtotal 0:totaltotal:page.syncqueryParams.pageNum:limit.syncqueryParams.pageSize:page-sizes[3, 5, 10, 20, 30, 50]:pagerCount5paginationgetList//el-colel-col :span12el-tablev-loadingtableLoadingrefselectMultipleTable:dataselectTableData:row-style{height: 54px}el-table-column label序号 typeindex aligncenter width55 fixed /el-table-column label账户名称 propcompanyCode :formattertableFormat aligncenter min-width120 show-overflow-tooltip /el-table-column labelbankAccountId propbankAccountId aligncenter min-width130 show-overflow-tooltip /el-table-column label账户类型 propaccountType :formattertableFormat aligncenter min-width100 show-overflow-tooltip /el-table-column label银行卡号 propcardNum aligncenter min-width220 show-overflow-tooltip /el-table-columnlabel操作aligncenterfixedrightwidth100template slot-scopescopeel-buttonclassdelBtnsizesmalltypetexticonel-icon-deleteclickhandleDelete(scope.row)删除/el-button/template/el-table-column/el-tablepaginationv-showselectTotal 0:totalselectTotal:page.syncpageNum:limit.syncpageSize:page-sizes[3, 5, 10, 20, 30, 50]:pagerCount5paginationgetSelectList//el-col/el-row/div
/templatescript
import Search from /components/Search/index
import {deepClone,
} from /utils
import {getDepartmentsList
} from /api/tableLinkage
import {geBasicAccountType,geBasicCompany,
} from /api/selectListexport 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 进而触发记忆选择核心方法 changePageCoreRecordDataif (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 进而触发记忆选择核心方法 changePageCoreRecordDatathis.$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},}
}
/scriptstyle
/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 进而触发记忆选择核心方法 changePageCoreRecordDataif (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 进而触发记忆选择核心方法 changePageCoreRecordDatathis.$refs.multipleTable.toggleRowSelection(findRow)} else {// 当前页不存在需要删除的这条数据直接调用前端分页方法对所有选中数据已剔除需要删除的这条数据重新进行分页this.handleSelectListPaging()}}, 参考文章
element的table表格多选结合分页实现已选中的记忆功能和实现表格数据和已选数据动态同步更新_element table分页多选-CSDN博客
