天津建设招标网站首页,全国室内设计学校,0基础学剪辑视频,seo优化包括github求⭐
vue3 依赖-组件tablepage-vue3说明文档#xff0c;列表页快速开发#xff0c;使用思路及范例#xff08;Ⅰ#xff09;配置项文档
vue3 依赖-组件tablepage-vue3说明文档#xff0c;列表页快速开发#xff0c;使用思路及范例#xff08;Ⅱ#xff09;搜索…github求⭐
vue3 依赖-组件tablepage-vue3说明文档列表页快速开发使用思路及范例Ⅰ配置项文档
vue3 依赖-组件tablepage-vue3说明文档列表页快速开发使用思路及范例Ⅱ搜索及数据获取配置项
vue3 依赖-组件tablepage-vue3说明文档列表页快速开发使用思路及范例Ⅲ列表项及分页器配置及props配置
vue3 依赖-组件tablepage-vue3说明文档列表页快速开发使用思路及范例Ⅳ其他配置项 其他配置项 其他配置项titlenoTitlenoMountedGetDataloading 其他配置项
title
设置左上角的title 文案默认将会从路由配置中读取meta.title {path: message,name: message,meta: { title: 短信发送 },component: () import(/views/Message/index.vue)},亦可自己手动配置
templateTablePage titleDIYtitle :tableApigetMessageListtemplate #defaultel-table-column typeindex label序号 aligncenter width90 /el-table-column propname label姓名 aligncenter min-width90 show-overflow-tooltip /el-table-column propphone label电话 aligncenter min-width90 show-overflow-tooltip //template/TablePage
/template
script setupimport TablePage from TablePage-vue3const getMessageList () ({total: 5,data: new Array(5).fill({ name: 张三, phone: 13x-xxxx-xxxx })})
/scriptnoTitle
如果不想配置title可以声明noTitle 取消显示
templateTablePage noTitle :tableApigetMessageListtemplate #defaultel-table-column typeindex label序号 aligncenter width90 /el-table-column propname label姓名 aligncenter min-width90 show-overflow-tooltip /el-table-column propphone label电话 aligncenter min-width90 show-overflow-tooltip //template/TablePage
/template
script setupimport TablePage from TablePage-vue3const getMessageList () ({total: 5,data: new Array(5).fill({ name: 张三, phone: 13x-xxxx-xxxx })})
/scriptnoMountedGetData
在部分业务场景中你并不想在加载页面时立即调用接口可以声明noMountedGetData属性为true此时组件内部将不会在onMounted获取数据 注意此属性不会影响搜索、重置、页码切换时调用接口尽管声明了noMountedGetData属性为true但搜索、重置、页码切换时组件仍然会请求接口
loading
在一些业务情景下可能想让table的loading因外部事件而显示此时可以传入loading本属性接收Boolean类型当为true时列表页将会显示loading对于loading所需配置亦可直接声明到组件上
templateTablePage loading element-loading-text数据加载中... :tableApigetMessageListtemplate #defaultel-table-column typeindex label序号 aligncenter width90 /el-table-column propname label姓名 aligncenter min-width90 show-overflow-tooltip /el-table-column propphone label电话 aligncenter min-width90 show-overflow-tooltip //template/TablePage
/template
script setupimport TablePage from TablePage-vue3const getMessageList () ({total: 5,data: new Array(5).fill({ name: 张三, phone: 13x-xxxx-xxxx })})
/script
