- <div>
- <el-button @click="openDialog">打开弹窗el-button>
- <el-dialog :visible.sync="dialogVisible" width="50%">
- <el-table
- :data="tableData"
- style="width: 100%"
- @selection-change="handleSelectionChange"
- >
- <el-table-column
- type="selection"
- width="55"
- >el-table-column>
- <el-table-column
- prop="id"
- label="ID"
- >el-table-column>
- <el-table-column
- prop="name"
- label="名称"
- >el-table-column>
- el-table>
- <el-pagination
- @current-change="handlePageChange"
- :current-page="currentPage"
- :page-sizes="[10, 20, 50]"
- :page-size="pageSize"
- layout="total, sizes, prev, pager, next, jumper"
- :total="totalItems"
- >el-pagination>
- <div>选中的文本: {{ selectedText }}div>
- el-dialog>
- div>
-
- export default {
- data() {
- return {
- dialogVisible: false,
- tableData: [], // 表格数据
- selectedIds: [], // 选中的ID数组
- selectedText: '', // 选中的文本字符串
- currentPage: 1, // 当前页码
- pageSize: 10, // 每页显示的条目数
- totalItems: 0, // 总条目数
- };
- },
- methods: {
- // 打开弹窗
- openDialog() {
- this.dialogVisible = true;
- this.loadTableData();
- },
-
- // 加载表格数据
- loadTableData() {
- // 假设 fetchTableData 是一个异步方法,用于从API获取表格数据
- // 在这里,您需要根据您的实际需求实现这个方法
- this.fetchTableData(this.currentPage, this.pageSize).then(data => {
- this.tableData = data.items;
- this.totalItems = data.total;
-
- // 设置表格的选中状态
- this.$refs.multipleTable.clearSelection();
- this.selectedIds.forEach(id => {
- const row = this.tableData.find(row => row.id === id);
- if (row) {
- this.$refs.multipleTable.toggleRowSelection(row, true);
- }
- });
- });
- },
-
- // 处理checkbox变化
- handleSelectionChange(val) {
- this.selectedIds = val.map(item => item.id);
- this.selectedText = val.map(item => item.name).join('、');
- },
-
- // 处理翻页
- handlePageChange(val) {
- this.currentPage = val;
- this.loadTableData();
- },
-
- // 假设的异步方法,用于从API获取表格数据
- fetchTableData(page, pageSize) {
- // 替换为实际的API调用逻辑
- // 这里返回的是一个模拟的Promise
- return new Promise((resolve) => {
- setTimeout(() => {
- resolve({
- items: [
- // 假设的数据
- { id: 1, name: 'Item 1' },
- { id: 2, name: 'Item 2' },
- // ...更多数据
- ],
- total: 100, // 总条数
- });
- }, 500);
- });
- },
- },
- created() {
- // 可以在这里从本地存储或其他地方加载之前保存的selectedIds
- // 例如:
- // const savedIds = localStorage.getItem('selectedIds');
- // if (savedIds) {
- // this.selectedIds = JSON.parse(savedIds);
- // }
- },
- }
vue elementui 打开弹窗 弹窗里有table 勾选table里的checkbox 获得id的集合并把对应的文本用顿号隔开显示在页面 第二次点开table的时候 通过之前选中的id集合 回显被选中的checkbox状态 翻页的时候亦是如此