vue3 依赖-组件tablepage-vue3版本1.0.2更新内容

buttonModule 插槽名变更(原为buttonModel)

tablePage插槽buttonModel 插槽名变更为buttonModule
原始插槽名命名错误,进行优化

<template>
  <table-page :searchConfig="searchConfig" :tableApi="getMessageList" >
    <template #default>
		<el-button type="primary">导入</el-button>
	</template>
    <template #default>
      <el-table-column type="index" label="序号" align="center" width="90" />
      <el-table-column prop="recieveUserName" label="接收人姓名" align="center" min-width="90" show-overflow-tooltip />
      <el-table-column prop="recieveUserPhone" label="接收人电话" align="center" min-width="90" show-overflow-tooltip />
      <el-table-column prop="content" label="内容" align="center" min-width="90" show-overflow-tooltip />
      <el-table-column prop="createTime" label="提交时间" align="center" min-width="90" show-overflow-tooltip />
      <el-table-column prop="sendTime" label="发送时间" align="center" min-width="90" show-overflow-tooltip />
      <el-table-column prop="recieveTime" label="送达时间" align="center" min-width="90" show-overflow-tooltip />
      <el-table-column prop="recieveStatusVal" label="送达状态" align="center" min-width="90" show-overflow-tooltip />
    </template>
  </table-page>
</template>
<script setup>
  import TablePage from 'tablepage-vue3'
  import { getMessageList } from '@/api/message' // 接口
  const searchConfig = [
    {
      label: '时间',
      type: 'times'
    },
    {
      label: '电话',
      key: 'phone'
    }
  ]
</script>

新增属性formProps

新增属性formProps 该属性可参考属性 paginationProps 是将声明到本属性的对象,绑定到组件内部的ElForm标签上
接收对象

<template>
  <table-page :searchConfig="searchConfig" :tableApi="getMessageList" :formProps="{labelWidth:'200px',disabled:true	}">
    <template #default>
      <el-table-column type="index" label="序号" align="center" width="90" />
      <el-table-column prop="recieveUserName" label="接收人姓名" align="center" min-width="90" show-overflow-tooltip />
      <el-table-column prop="recieveUserPhone" label="接收人电话" align="center" min-width="90" show-overflow-tooltip />
      <el-table-column prop="content" label="内容" align="center" min-width="90" show-overflow-tooltip />
      <el-table-column prop="createTime" label="提交时间" align="center" min-width="90" show-overflow-tooltip />
      <el-table-column prop="sendTime" label="发送时间" align="center" min-width="90" show-overflow-tooltip />
      <el-table-column prop="recieveTime" label="送达时间" align="center" min-width="90" show-overflow-tooltip />
      <el-table-column prop="recieveStatusVal" label="送达状态" align="center" min-width="90" show-overflow-tooltip />
    </template>
  </table-page>
</template>
<script setup>
  import TablePage from 'tablepage-vue3'
  import { getMessageList } from '@/api/message' // 接口
  const searchConfig = [
    {
      label: '时间',
      type: 'times'
    },
    {
      label: '电话',
      key: 'phone'
    }
  ]
</script>

相关推荐

  1. vue3 依赖-组件tablepage-vue3版本1.0.2更新内容

    2024-04-22 06:58:03       36 阅读
  2. Vue3组件通信相关内容整理

    2024-04-22 06:58:03       60 阅读
  3. Vue3相关语法内容组件传值

    2024-04-22 06:58:03       33 阅读
  4. vue3组件注册

    2024-04-22 06:58:03       59 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-22 06:58:03       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-22 06:58:03       106 阅读
  3. 在Django里面运行非项目文件

    2024-04-22 06:58:03       87 阅读
  4. Python语言-面向对象

    2024-04-22 06:58:03       96 阅读

热门阅读

  1. Css切换不同窗口

    2024-04-22 06:58:03       33 阅读
  2. 统一建模语言UML图

    2024-04-22 06:58:03       29 阅读
  3. NPM 详解

    2024-04-22 06:58:03       41 阅读
  4. 开发语言漫谈-SQL

    2024-04-22 06:58:03       39 阅读
  5. 在 Apache Sedona 中处理空间栅格数据

    2024-04-22 06:58:03       35 阅读
  6. Qt查询mysql表的信息解释

    2024-04-22 06:58:03       38 阅读
  7. pyflink统计单词

    2024-04-22 06:58:03       39 阅读
  8. 20240420

    2024-04-22 06:58:03       39 阅读
  9. 【无标题】

    2024-04-22 06:58:03       34 阅读
  10. 前端nodead面试题

    2024-04-22 06:58:03       32 阅读