devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vite + Vue3 + Ts 《企业级项目》二次封装 el-table、el-pagination、el-tooltip、el-dialog_vue3+ts el-table

作者：小丑西瓜9 | 2024-06-11 03:36:08

赞

踩

vue3+ts el-table

 ​前期回顾    ​      

Vite项目，vite + vue3 + ts + vuex + vue-router + axios + scss + 自动导入api（就是用v3不需要引入api直接使用）_0.活在风浪里的博客-CSDN博客_vue3+vite​webpack回顾 ​ （移动端打包）一步一步,一步 从代码到,打包成为手机App,上传至nginx服务器 (Vue项目)_0.活在风浪里的博客-CSDN博客_移动端打包一步一步,一步 从代码到,打包成为手机App,上传至ngnix服务器 (Vue项目) https://blog.csdn.net/m0_57904695/article/details/122500485?ops_request_misc=%257B%2522request%255Fid%2522%253A%25221656https://blog.csdn.net/m0_57904695/article/details/125487996?spm=1001.2014.3001.5501

目录

封装的功能有哪些？

最简单示例

类似这样：

Vue3 表格封装

目录结构：

子组件：newTable

抽离的 emits.ts

抽离的  props.ts

global.d.ts

全局css

newForm

页面使用：

效果： 

el-tooltip 

子组件：

父组件：

el-dialog

子组件：

全局动画弹框css

父组件：

 封装了一个子组件（table、分页），在不同页面引入

封装的功能有哪些？

 分页、表格排序、文字居中、溢出隐藏、操作列、开关、宽、最小宽、type类型（selection/index/expand）、格式化 、不同页面不同操作列、vuex、vue持久化插件、

说思路：data数据请求接口拿到，表头数据一般也是后台接口，如没，前台可自定义自己写

最简单示例

  1. //lable指定表头名 //prop指定每一项数据 
  2. <el-table  :data="tableData">
  3.    <el-table-column 
  4.     :label="item.label" 
  5.      :prop="item.prop"  
  6.     :key="index" v-for="(item,index) in tableHeader" 
  7.    >
  8.   </el-table-column>
  9. </el-table>
  10.  
  11.  
  12. //表头
  13.  tableHeader:[
  14. 		  {label:'姓名' , prop : 'uname'},
  15. 		  {label:'年龄' , prop : 'age'},
  16. 		  {label:'性别' , prop : 'sex'},
  17. 	    ],
  18. 			    
  19.   //表数据
  20. tableData:[
  21. 		 {uname:"小明",age:'20',sex:'男'}, 
  22.          {uname:"小黑",age:'18',sex:'男'},
  23.        ]
  24. 	
  25.

类似这样：

 念及此！那开始正文

Vue3 表格封装

目录结构：

子组件：newTable

  1. <template>
  2. 	<div class="container">
  3. 		<el-card shadow="hover">
  4. 			<el-scrollbar max-height="300px" v-if="isShowSearchRegion" class="wrap">
  5. 				<slot name="search"></slot>
  6. 			</el-scrollbar>
  7. 			<el-table
  8. 				v-bind="$attrs"
  9. 				stripe
  10. 				style="width: 100%"
  11. 				:data="tableData"
  12. 				:border="tableBorder"
  13. 				:height="excludeSearchAreaAfterTableHeight"
  14. 			>
  15. 				<template #empty>
  16. 					<el-empty :image-size="emptyImgSize" description="暂无数据" />
  17. 				</template>
  18.  
  19. 				<el-table-column
  20. 					type="index"
  21. 					label="序号"
  22. 					min-width="60"
  23. 					:index="orderHandler"
  24. 					align="center"
  25. 				/>
  26.  
  27. 				<el-table-column
  28. 					v-for="item in tableHeader"
  29. 					v-bind="item"
  30. 					:key="item.prop"
  31. 				>
  32. 					<template #default="{ row }" v-if="item.slotKey">
  33. 						<template v-if="item.slotKey.includes('default')">
  34. 							<el-link
  35. 								type="primary"
  36. 								:underline="false"
  37. 								@click="handleEdit(row)"
  38. 								>编辑</el-link
  39. 							>
  40. 							<el-popconfirm
  41. 								title="确定删除吗？"
  42. 								@confirm="handleDelete(row.id)"
  43. 							>
  44. 								<template #reference>
  45. 									<el-link class="ml15" type="danger" :underline="false"
  46. 										>删除</el-link
  47. 									>
  48. 								</template>
  49. 							</el-popconfirm>
  50. 						</template>
  51. 						<slot
  52. 							v-for="slot in item.slotKey.split(',')"
  53. 							:name="slot"
  54. 							:row="row"
  55. 						></slot>
  56. 					</template>
  57. 				</el-table-column>
  58. 			</el-table>
  59.  
  60. 			<!-- 分页 -->
  61. 			<el-pagination
  62. 				v-if="paginationFlag"
  63. 				background
  64. 				:page-sizes="pageSizesArr"
  65. 				:current-page="pageNum"
  66. 				:page-size="pageSize"
  67. 				:layout="layout"
  68. 				:total="total"
  69. 				@size-change="handleSizeChange"
  70. 				@current-change="handleCurrentChange"
  71. 			></el-pagination>
  72. 		</el-card>
  73. 	</div>
  74. </template>
  75.  
  76. <script setup lang="ts">
  77. import { onMounted, ref } from "vue";
  78. import myEmits from "./newTableConfig/emits";
  79. import myProps from "./newTableConfig/props";
  80.  
  81. const emits = defineEmits(myEmits);
  82. const props = defineProps(myProps);
  83.  
  84. // 序号根据数据长度计算
  85. const orderHandler = (index: number) => {
  86. 	const { pageNum, pageSize } = props;
  87. 	// 第0条 * 每页条数 + 当前索引+1
  88. 	return (pageNum - 1) * pageSize + index + 1;
  89. };
  90. //  页数改变
  91. const handleSizeChange = (val: number | string) =>
  92. 	emits("handleSizeChange", val);
  93.  
  94. // 当前页改变
  95. const handleCurrentChange = (val: number | string) =>
  96. 	emits("handleCurrentChange", val);
  97.  
  98. // 编辑、删除
  99. const handleEdit = (row: object) => emits("handleEdit", row);
  100. const handleDelete = (id: number) => emits("handleDelete", id);
  101.  
  102. // 搜索区域高度及默认值
  103. const Height = ref();
  104. // 减去搜索区域高度后的table
  105. const excludeSearchAreaAfterTableHeight = ref("calc(100vh - 165px)");
  106.  
  107. // 获取表格高度-动态计算搜索框高度（onMounted、resize，208是已知的面包屑tebView高度）
  108. const updateHeight = () => {
  109. 	let wrapEl = document.querySelector(".wrap") as HTMLDivElement | null;
  110. 	if (!wrapEl) return;
  111. 	Height.value = wrapEl.getBoundingClientRect().height;
  112. 	if (props.isShowSearchRegion) {
  113. 		excludeSearchAreaAfterTableHeight.value = `calc(100vh - ${
  114. 			165 + Height.value
  115. 		}px)`;
  116. 	}
  117. };
  118. onMounted(() => {
  119. 	// 表格下拉动画
  120. 	const tableContainer = <HTMLElement>document.querySelector(".container");
  121. 	setTimeout(() => {
  122. 		if (tableContainer) tableContainer.style.transform = "translateY(0)";
  123. 		updateHeight();
  124. 	}, 300);
  125. });
  126. window.addEventListener("resize", updateHeight);
  127. </script>
  128.  
  129. <style scoped lang="scss">
  130. .container {
  131. 	padding: 15px;
  132. 	transform: translateY(-100%);
  133. 	transition: transform 0.5s;
  134. 	// background-color: #870404;
  135. 	background-color: #f8f8f8;
  136. 	.el-scrollbar {
  137. 		// border: 1px solid pink;
  138. 		min-height: 100px;
  139. 		width: 100%;
  140. 		height: fit-content;
  141. 	}
  142. 	.el-card {
  143. 		width: 100%;
  144. 		height: 100%;
  145. 	}
  146.  
  147. 	.el-pagination {
  148. 		margin-left: 15%;
  149. 		height: 35px;
  150. 		margin-top: 16px;
  151. 	}
  152. }
  153. // 穿透父组件
  154. :deep(.el-link) {
  155. 	padding-left: 10px;
  156. }
  157. </style>

抽离的 emits.ts

  1. export default [
  2. 	// 这里是自定义事件 emits
  3. 	'handleSizeChange',
  4. 	'handleCurrentChange',
  5. 	'handleEdit',
  6. 	'handleDelete',
  7. ];

抽离的  props.ts

  1. export default {
  2. 	// 表头数据
  3. 	tableHeader: {
  4. 		type: Array as () => TableHeader[],
  5. 		default: function () {
  6. 			return [];
  7. 		},
  8. 	},
  9.  
  10. 	// 表格显示的数据
  11. 	tableData: {
  12. 		default: function () {
  13. 			return [];
  14. 		},
  15. 	},
  16.  
  17. 	// 边框
  18. 	tableBorder: {
  19. 		type: Boolean,
  20. 		default: false,
  21. 	},
  22.  
  23. 	// 总页数
  24. 	total: {
  25. 		type: Number,
  26. 		default: 0,
  27. 	},
  28.  
  29. 	// 分页的页容量数组
  30. 	pageSizesArr: {
  31. 		type: Array as () => number[],
  32. 		default() {
  33. 			return [10, 20, 30, 50];
  34. 		},
  35. 	},
  36.  
  37. 	// 分页的布局
  38. 	layout: {
  39. 		type: String,
  40. 		default: 'total, sizes, prev, pager, next, jumper',
  41. 	},
  42.  
  43. 	// 分页是否显示
  44. 	paginationFlag: {
  45. 		type: Boolean,
  46. 		default: true,
  47. 	},
  48. 	// 当前页
  49. 	pageNum: {
  50. 		type: Number,
  51. 		default: 1,
  52. 	},
  53. 	// 页容量
  54. 	pageSize: {
  55. 		type: Number,
  56. 		default: 10,
  57. 	},
  58. 	// empty的图片大小
  59. 	emptyImgSize: {
  60. 		type: Number,
  61. 		default: 200,
  62. 	},
  63. 	// 搜索区域是否显示
  64. 	isShowSearchRegion: {
  65. 		type: Boolean,
  66. 		default: true,
  67. 	},
  68.  
  69. 	// 是否展示连续序号
  70. 	isSerialNo: {
  71. 		type: Boolean,
  72. 		default: true,
  73. 	},
  74. };

global.d.ts

  1.  
  2. // new-table
  3. //表头数据类型定义
  4. declare interface TableHeader<T = any> {
  5. 	label: string;
  6. 	prop: string;
  7. 	align?: string;
  8. 	overHidden?: boolean;
  9. 	minWidth?: string;
  10. 	sortable?: boolean;
  11. 	type?: string;
  12. 	fixed?: string;
  13. 	width?: string;
  14. 	isActionColumn?: boolean;
  15. 	isCustomizeColumn?: boolean;
  16. 	slotKey?: string;
  17. }
  18.  
  19. /*
  20.  允许任何字符串作为索引
  21.  不然会报错, 使用动态属性名,需要使用索引签名
  22. */
  23. declare type SearchFormType = {
  24. 	[key: string]: string;
  25. };
  26.  
  27. declare type FormOptions = {
  28. 	type: string;
  29. 	props: {
  30. 		label: string;
  31. 		placeholder: string;
  32. 		type: string;
  33. 		clearable: boolean;
  34. 	};
  35. 	vm: string;
  36. 	selectOptions?: [
  37. 		{
  38. 			value: string | number;
  39. 			label: string;
  40. 		}
  41. 	];
  42. 	cascaderOptions?: any;
  43. };

全局css

  1. /* 全局样式 个人不允许修改全局样式【重要！！！】*/
  2.  
  3. /* 开关样式
  4. ------------------------------------------------ */
  5.  
  6. .el-switch__label--left {
  7. 	position: relative;
  8. 	left: 45px;
  9. 	color: #fff;
  10. 	z-index: -1111;
  11. }
  12.  
  13. .el-switch__core {
  14. 	width: 50px !important;
  15. }
  16.  
  17. .el-switch__label--right {
  18. 	position: relative;
  19. 	right: 46px;
  20. 	color: #fff;
  21. 	z-index: -1111;
  22. }
  23.  
  24. .el-switch__label--right.is-active {
  25. 	z-index: 1111;
  26. 	color: #fff !important;
  27. }
  28.  
  29. .el-switch__label--left.is-active {
  30. 	z-index: 1111;
  31. 	color: #fff !important;
  32. }
  33.  
  34.  
  35. /* 表格样式
  36. ------------------------------------------------ */
  37. .el-table thead tr,
  38. .el-table tbody tr>td {
  39.     padding: 0 !important;
  40.     height: 75px;
  41.     line-height: 75px;
  42.     color: #909399;
  43. }
  44.  
  45. .el-table thead tr>th {
  46.     background-color: var(--el-color-info-light-8) !important;
  47. }

newForm

  1. <template>
  2. 	<el-form ref="searchFormRef" :model="searchForm" size="default">
  3. 		<!-- 使用了不稳定的 key，可能会导致一些不可预期的行为，比如输入框失去焦点。 -->
  4. 		<el-row>
  5. 			<el-col
  6. 				:xs="24"
  7. 				:sm="24"
  8. 				:md="24"
  9. 				:lg="12"
  10. 				:xl="6"
  11. 				v-for="item in formOptions"
  12. 				:key="item.vm"
  13. 			>
  14. 				<el-form-item :label="item.props.label" :prop="item.vm">
  15. 					<el-input
  16. 						v-if="item.type === FormOptionsType.INPUT"
  17. 						v-model.lazy="searchForm[item.vm]"
  18. 						v-bind="item.props"
  19. 						class="ml10 w100"
  20. 					></el-input>
  21.  
  22. 					<el-select
  23. 						v-if="item.type === FormOptionsType.SELECT"
  24. 						v-model.lazy="searchForm[item.vm]"
  25. 						v-bind="item.props"
  26. 						class="ml10 w100"
  27. 					>
  28. 						<el-option
  29. 							v-for="option in item.selectOptions"
  30. 							:key="option.value"
  31. 							:label="option.label"
  32. 							:value="option.value"
  33. 						/>
  34. 					</el-select>
  35.  
  36. 					<el-cascader
  37. 						v-if="item.type === FormOptionsType.CASCADER"
  38. 						v-model.lazy="searchForm[item.vm]"
  39. 						:options="item.cascaderOptions"
  40. 						v-bind="item.props"
  41. 						class="ml10 w100"
  42. 					/>
  43.  
  44. 					<el-date-picker
  45. 						v-if="item.type === FormOptionsType.DATE_PICKER"
  46. 						v-model.lazy="searchForm[item.vm]"
  47. 						v-bind="item.props"
  48. 						class="ml10 w100"
  49. 					/>
  50. 				</el-form-item>
  51. 			</el-col>
  52. 			<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6" class="xs-mt">
  53. 				<el-form-item style="margin-left: 10px">
  54. 					<el-button @click="onReset">
  55. 						<SvgIcon name="ant-ReloadOutlined"></SvgIcon>
  56. 						重置
  57. 					</el-button>
  58. 					<el-button type="primary" @click="onSearch">
  59. 						<SvgIcon name="ant-SearchOutlined"></SvgIcon>
  60. 						查询
  61. 					</el-button>
  62. 				</el-form-item>
  63. 			</el-col>
  64. 		</el-row>
  65. 	</el-form>
  66. </template>
  67.  
  68. <script setup lang="ts" name="newForm">
  69. import { toRefs, onBeforeUnmount, ref } from 'vue';
  70. import type { PropType } from 'vue';
  71. import { type FormInstance } from 'element-plus';
  72.  
  73. const searchFormRef = ref<FormInstance>();
  74.  
  75. enum FormOptionsType {
  76. 	INPUT = 'input', // 输入框
  77. 	SELECT = 'select', // 下拉框
  78. 	CASCADER = 'cascader', // 级联选择器
  79. 	DATE_PICKER = 'date-picker', // 日期选择器
  80. }
  81.  
  82. const props = defineProps({
  83. 	formOptions: {
  84. 		type: Array as PropType<FormOptions[]>,
  85. 		required: true,
  86. 	},
  87. 	searchForm: {
  88. 		type: Object as PropType<SearchFormType>,
  89. 		required: true,
  90. 	},
  91. });
  92. const { formOptions, searchForm } = toRefs(props);
  93.  
  94. const emit = defineEmits(['reset', 'search']);
  95.  
  96. const onReset = () => emit('reset');
  97. const onSearch = () => emit('search');
  98. onBeforeUnmount(() => searchFormRef.value?.resetFields());
  99. defineExpose({ searchFormRef });
  100. </script>
  101.  
  102. <style scoped lang="scss">
  103. :deep(.el-form-item__label) {
  104. 	margin-left: 10px;
  105. }
  106. </style>

封装完成，下面在使用的页面调用

页面使用：

  1. <template>
  2. 	<div class="container-wrapper">
  3. 		<!-- 动态 page -->
  4. 		<new-table
  5. 			:tableHeader="tableHeader"
  6. 			:tableData="tableData"
  7. 			:pageNum="pageNum"
  8. 			:pageSize="pageSize"
  9. 			:total="pageTotal"
  10. 			@handleSizeChange="onHandleSizeChange"
  11. 			@handleCurrentChange="onHandleCurrentChange"
  12. 			@handleEdit="onHandleEdit"
  13. 			@handleDelete="onHandleDelete"
  14. 		>
  15. 			<template #search>
  16. 				<new-form
  17. 					:formOptions="formOptions"
  18. 					:searchForm="searchForm"
  19. 					@reset="onReset"
  20. 					@search="onSearch"
  21. 				/>
  22. 			</template>
  23.  
  24. 			<template #switch="{ row }">
  25. 				<el-switch
  26. 					v-model="row.fileStatus"
  27. 					active-text="开"
  28. 					inactive-text="关"
  29. 					:active-value="1"
  30. 					:inactive-value="2"
  31. 					active-color="#13ce66"
  32. 					inactive-color="#ff4949"
  33. 					@change="changeSwitchStatus(row.id, row.fileStatus)"
  34. 				/>
  35. 			</template>
  36. 		</new-table>
  37. 	</div>
  38. </template>
  39.  
  40. <script setup lang="ts" name="algorithmRegistrationQuery">
  41. import { onMounted, reactive, toRefs } from "vue";
  42. // import { getTestList } from "/@/api/encryptionAlgorithm/templateDefinition";
  43. // import { STATUS_CODE } from "/@/enum/global";
  44. const state = reactive({
  45. 	//表头数据
  46. 	// el-table-column有的属性都可以在这传
  47. 	tableHeader: <TableHeader[]>[
  48. 		{ label: "姓名", prop: "uname" },
  49. 		{ label: "年龄", prop: "age" },
  50. 		{ label: "性别", prop: "sex", slotKey: "switch" },
  51. 		{ label: "操作", fixed: "right", slotKey: "default" },
  52. 	],
  53. 	//表项数据
  54. 	tableData: [
  55. 		{ uname: "小帅", age: "18", sex: "男", status: false, id: 1 },
  56. 		{ uname: "小美", age: "148", sex: "女", status: false, id: 2 },
  57. 		{ uname: "小明", age: "12", sex: "男", status: true, id: 3 },
  58. 		{ uname: "小红", age: "12", sex: "女", status: false, id: 4 },
  59. 		{ uname: "小黑", age: "12", sex: "男", status: true, id: 5 },
  60. 		{ uname: "小白", age: "12", sex: "女", status: false, id: 6 },
  61. 		{ uname: "小黑", age: "12", sex: "男", status: true, id: 7 },
  62. 		{ uname: "小白", age: "12", sex: "女", status: false, id: 8 },
  63. 		{ uname: "小黑", age: "12", sex: "男", status: true, id: 9 },
  64. 		{ uname: "小白", age: "12", sex: "女", status: false, id: 10 },
  65. 		{ uname: "小黑", age: "12", sex: "男", status: true, id: 11 },
  66. 	],
  67. 	formOptions: <FormOptions[]>[
  68. 		{
  69. 			type: "input",
  70. 			props: {
  71. 				label: "合规规则",
  72. 				placeholder: "请输入合规规则",
  73. 				type: "text",
  74. 				clearable: true,
  75. 			},
  76. 			vm: "knowledgeName",
  77. 		},
  78. 		{
  79. 			type: "input",
  80. 			props: {
  81. 				label: "文件数量",
  82. 				placeholder: "请输入文件数量",
  83. 				type: "text",
  84. 				clearable: true,
  85. 			},
  86. 			vm: "documentNumber",
  87. 		},
  88. 		// 下拉选择器
  89. 		{
  90. 			type: "select",
  91. 			props: {
  92. 				label: "所属部门",
  93. 				placeholder: "请选择",
  94. 				clearable: true,
  95. 			},
  96. 			vm: "department",
  97. 			selectOptions: [
  98. 				{
  99. 					label: "数据安全",
  100. 					value: 1,
  101. 				},
  102. 				{
  103. 					label: "研发",
  104. 					value: 2,
  105. 				},
  106. 				{
  107. 					label: "事业",
  108. 					value: 3,
  109. 				},
  110. 			],
  111. 		},
  112. 		// 时间范围选择器
  113. 		{
  114. 			type: "date-picker",
  115. 			props: {
  116. 				label: "时间范围",
  117. 				type: "datetimerange", // datetimerange范围 datetime日期
  118. 				clearable: true,
  119. 				"range-separator": "-",
  120. 				"start-placeholder": "开始日期",
  121. 				"end-placeholder": "结束日期",
  122. 				"value-format": "YYYY-MM-DD HH:mm:ss",
  123. 			},
  124. 			vm: "createTime",
  125. 		},
  126.  
  127. 		// 级联选择器
  128. 		{
  129. 			type: "cascader",
  130. 			props: {
  131. 				label: "所属部门",
  132. 				placeholder: "请选择",
  133. 				clearable: true,
  134. 			},
  135. 			vm: "cascader",
  136. 			cascaderOptions: [
  137. 				{
  138. 					value: "guide",
  139. 					label: "Guide",
  140. 					children: [
  141. 						{
  142. 							value: "disciplines",
  143. 							label: "Disciplines",
  144. 							children: [
  145. 								{
  146. 									value: "consistency",
  147. 									label: "Consistency",
  148. 								},
  149. 							],
  150. 						},
  151. 						{
  152. 							value: "navigation",
  153. 							label: "Navigation",
  154. 							children: [
  155. 								{
  156. 									value: "side nav",
  157. 									label: "Side Navigation",
  158. 								},
  159. 								{
  160. 									value: "top nav",
  161. 									label: "Top Navigation",
  162. 								},
  163. 							],
  164. 						},
  165. 					],
  166. 				},
  167. 				{
  168. 					value: "component",
  169. 					label: "Component",
  170. 					children: [
  171. 						{
  172. 							value: "basic",
  173. 							label: "Basic",
  174. 							children: [
  175. 								{
  176. 									value: "button",
  177. 									label: "Button",
  178. 								},
  179. 							],
  180. 						},
  181. 						{
  182. 							value: "form",
  183. 							label: "Form",
  184. 							children: [
  185. 								{
  186. 									value: "radio",
  187. 									label: "Radio",
  188. 								},
  189. 								{
  190. 									value: "checkbox",
  191. 									label: "Checkbox",
  192. 								},
  193. 							],
  194. 						},
  195. 						{
  196. 							value: "data",
  197. 							label: "Data",
  198. 							children: [
  199. 								{
  200. 									value: "table",
  201. 									label: "Table",
  202. 								},
  203. 							],
  204. 						},
  205. 						{
  206. 							value: "notice",
  207. 							label: "Notice",
  208. 							children: [
  209. 								{
  210. 									value: "alert",
  211. 									label: "Alert",
  212. 								},
  213. 							],
  214. 						},
  215. 						{
  216. 							value: "navigation",
  217. 							label: "Navigation",
  218. 							children: [
  219. 								{
  220. 									value: "menu",
  221. 									label: "Menu",
  222. 								},
  223. 							],
  224. 						},
  225. 						{
  226. 							value: "others",
  227. 							label: "Others",
  228. 							children: [
  229. 								{
  230. 									value: "dialog",
  231. 									label: "Dialog",
  232. 								},
  233. 							],
  234. 						},
  235. 					],
  236. 				},
  237. 				{
  238. 					value: "resource",
  239. 					label: "Resource",
  240. 					children: [
  241. 						{
  242. 							value: "axure",
  243. 							label: "Axure Components",
  244. 						},
  245. 					],
  246. 				},
  247. 			],
  248. 		},
  249. 	],
  250. 	//这里允许动态属性所以可为空
  251. 	searchForm: <SearchFormType>{},
  252. 	pageNum: 1,
  253. 	pageSize: 10,
  254. 	pageTotal: 0,
  255. });
  256. const {
  257. 	tableHeader,
  258. 	tableData,
  259. 	formOptions,
  260. 	searchForm,
  261. 	pageNum,
  262. 	pageSize,
  263. 	pageTotal,
  264. } = toRefs(state);
  265.  
  266. // 修改
  267. const onHandleEdit = (row: object) => {
  268. 	console.log(row);
  269. };
  270.  
  271. // 删除
  272. const onHandleDelete = (row: object) => {
  273. 	console.log(row);
  274. };
  275.  
  276. // switch
  277. const changeSwitchStatus = (id: number, status: boolean) => {
  278. 	console.log(id, status);
  279. };
  280.  
  281. //页容量改变
  282. const onHandleSizeChange = (val: number) => {
  283. 	// console.log('页容量 ==>：', val);
  284. 	pageSize.value = val;
  285. 	getTableList(pageNum.value, pageSize.value);
  286. };
  287. //当前分页改变
  288. const onHandleCurrentChange = (val: number) => {
  289. 	// console.log('当前页 
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/701537
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。