做我女朋友好吗网站,首页排名关键词优化,成都网站开发公司有哪些,php4.4.9支持wordpress版本el-table组件实现分页#xff0c;多选以及回显 需求思路1、实现分页多选并保存上一页的选择2、记录当前选择的数据3、默认数据的回显 完整代码 需求
使用 dialog 显示 table#xff0c;同时关闭时销毁el-table 表格多选回显已选择的表格数据#xff0c;分页来回切换依然正确… el-table组件实现分页多选以及回显 需求思路1、实现分页多选并保存上一页的选择2、记录当前选择的数据3、默认数据的回显 完整代码 需求
使用 dialog 显示 table同时关闭时销毁el-table 表格多选回显已选择的表格数据分页来回切换依然正确显示数据点击取消数据回到初始化勾选状态
思路
1、实现分页多选并保存上一页的选择
分别添加以下属性 Table 属性 Table-column 属性
el-table reftableRef row-keyid selection-changehandlechangeel-table-column typeselection :reserve-selectiontrue aligncenter /
/el-table2、记录当前选择的数据
定义 el-table 的 selection-change 事件回调函数
const handlechange (val: any[]) {selected.value val
}前两步已经能满足不需要回显的分页多选功能但是要实现数据的回显还需要以下处理。
3、默认数据的回显
假设定义两个响应式数组表示默认选择和当前选择
// 默认选中列表
const defaultSelected refany[]([])
// 当前选中的列表
const selected refany[]([])
// 通过 selection-change 事件回调保存当前选择的数据
const handlechange (val: any[]) {selected.value val
}在显示弹窗方法里通过 el-table 中的 toggleRowSelection 方法初始化选中所有默认选项注意是所有的选项而不只是当前页的选项如果只选择当前页的默认选项selected 将会丢失其他默认选项
// 显示表格弹窗
const showDialog () {getTableList()setTimeout(() {for (const item of defaultSelected.value) tableRef.value.toggleRowSelection(item, true) // 选中默认选中的行}, 0)visible.value true
}至此实现了所有功能总结一下原理就是 el-table 通过 row-key 来判断是否已选择所以通过 toggleRowSelection 选择所有默认的选项不管点击哪一页都会正确回显数据并且定义了 handlechange 会保存新的改变
如果每次确认后不销毁 table 组件需要调用 clearSelection 方法清空所有已选项
const handleClick () {// 保存新的数据defaultSelected.value cloneDeep(selected.value)selected.value.length 0pagination.currentPage 1// 清空表格已选项tableRef.value.clearSelection()visible.value false
}完整代码
记录下代码互相学习提提意见
script setup langtsx
import { useI18n } from /hooks/web/useI18n
import { getTableListApi } from /api/table
import { TableData } from /api/table/types
import { ref, reactive, watch } from vue
import { ElTableColumn, ElTable, ElPagination, ElButton, ElDialog } from element-plus
import { cloneDeep } from lodash-esconst { t } useI18n()const columns: any[] [{type: selection,width: 60,align: center},{field: title,label: t(tableDemo.title)},{field: author,label: t(tableDemo.author)},{field: display_time,label: t(tableDemo.displayTime),sortable: true},{field: importance,label: t(tableDemo.importance)},{field: pageviews,label: t(tableDemo.pageviews)}
]const loading ref(true)const visible ref(false)const pagination reactive({currentPage: 1, // 当前页数pageSize: 10, // 每页显示条数pageSizes: [10, 20, 30, 40, 50], // 每页显示个数选择器的选项设置total: 100 // 总条数
})const tableDataList refTableData[]([])const tableRef refany()// 默认选中列表
const defaultSelected refany[]([])// 当前选中的列表
const selected refany[]([])const getTableList async () {// 分页查询方法const res await getTableListApi({ ...pagination, pageIndex: pagination.currentPage }).catch(() {}).finally(() {loading.value false})if (res) {tableDataList.value res.data.list}
}const showDialog () {getTableList()setTimeout(() {for (const item of defaultSelected.value) tableRef.value.toggleRowSelection(item, true) // 选中默认选中的行}, 0)visible.value true
}const handlechange (val: any) {selected.value val
}const handleClick () {defaultSelected.value cloneDeep(selected.value)selected.value.length 0pagination.currentPage 1// 清空选项tableRef.value.clearSelection()visible.value false
}watch(() [pagination.currentPage, pagination.pageSize], getTableList, { immediate: true })
/scripttemplate!-- 控制弹窗显示 --ElButton typeprimary clickshowDialog显示/ElButton!-- 表格弹窗 --el-dialog title提示 v-modelvisible width80% destroyOnClosediv classw-full h-800px flex flex-col justify-betweenel-tablereftableRefheight760px:datatableDataList:loadingloadingrow-keyidselection-changehandlechangeel-table-columnv-forcolumn in columns:typecolumn.type:keycolumn.field:propcolumn.field:labelcolumn.label:reserveSelectiontrue//el-tablediv classflex justify-startel-button typeprimary clickhandleClick确认/el-button/div!-- 分页器 --div classflex justify-endel-paginationbackgroundlayouttotal, sizes, prev, pager, next, jumperv-model:current-pagepagination.currentPagev-model:page-sizepagination.pageSize:totalpagination.total:page-sizespagination.pageSizes//div/div/el-dialog
/template
