uniapp:mosowe-table高级表格组件

这篇具有很好参考价值的文章主要介绍了uniapp:mosowe-table高级表格组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

演示地址
下载地址

为偷懒而开发:

  1. 多级表头,默认子集占父级宽度50%,flex布局
  2. 根据设置自动生成搜索区
  3. 搜索区可设置默认展开/收起
  4. 可以设置左右固定列,多选框及索引列默认左侧固定
  5. 用户可自主设置展示列
  6. 组件内部翻页、刷新及搜索事件处理
  7. 组件内flex垂直布局模式
  8. 透传uni-table的props,events
  9. 内置常用表单按钮,emits返回相关数据
  10. 丰富的slots
  11. 可单选,多选

依赖

uni-table
uni-pagination
mosowe-form
mosowe-dropdown

props

属性 类型 默认 说明
column columnItem[] - 列配置,排列顺序即为表格顺序
localData array 本地数据列表,与requestMethod不能同时为空,优先级最高
requestMethod function 数据获取的方法,接受一个promise返回的方法,其then方法的回调参数res={code,data,msg}格式,data包含了dataListKeydataTotalKey,若不满足可以使用initBefore处理
autoRequest boolean true 是否自动请求数据,即页面加载完就请求
rowOperation rowOperation[] 表格行末尾的操作选项列表,即操作列
rowOperationWidth string 100 操作列宽度
tableProps object 表格uni-table的props配置,loading属性无效,已被组件内部处理了,如需请使用ref调用
title string 左上角表格名称
initBefore function 表格通过requestMethod获取数据后渲染页面前数据处理,参数为接口返回数据res,return值为{list,total}结构,list、total为固定字段
dataListKey string list requestMethod时数据列表的键名
dataTotalKey string total requestMethod时数据总数的键名
toolbar boolean/toolbarString true 表格常用工具展示,默认true展示全部,false不展示,值为toolbarString时展示相关按钮,多个英文逗号分隔
pagination boolean/paginationConfig true 分页器配置,默认true显示,组件默认配置为{current:1,pageSize:10},false不展示,翻页功能添加了节流处理,点击翻页300ms后请求数据
defaultOpenSearch boolean/number false 是否默认展开搜索区,或者默认展开多少项,配置为number的时候,默认显示‘收起’按钮,点击收起的时候,只展示一行
autoHeight boolean false 不限制高度,自动增加
maxHeight string - 最大高度,低于最大高度的时候,高度自适应,优先级高于autoHeight
showIndex boolean false 显示序号
exportSelectConfig exportSelectConfigObject 导出已选配置
radio boolean false tableProps.type === 'selection'时单选,单选时只能在当前页选中,跨页清空

注意

  1. 组件内部使用flex垂直布局,最外层元素宽高设置为100%,所以建议组件的父级元素应该设置固定高度,且y轴可滚动。
  2. 可通过ref操作uni-table等组件methods

columnItem

属性 类型 可选 说明
text string 列表头名称
value string 列单元格键名
width string 单元格宽度
fixed string left/right 固定位置,多选和序号固定在左侧,只针对一级表头,该项设置时列宽度默认100px
hideInTable boolean 在表格中不显示,仅一级表头生效
mustShow boolean 该列在表中必须展示,不能被用户隐藏,仅一级表头生效
align string left/center/right 表头对齐方式
filter-type string search/select/range/date 筛选类型,仅一级表头生效,search关键字搜索,select类别选择
filter-data array 筛选数据,仅一级表头生效
sortable boolean 是否启用排序,仅一级表头生效
searchOrder number 在搜索区的排列权重,越大越靠前
search boolean/searchConfig 是否可搜索,默认false,为true会根据是否包含enum字段选择显示input还是select
enum enumItem[] 枚举数组,若列表数据字段为enum的value,则会自动替换展示enum的text
children columnItem[] 子表头

rowOperation

属性 类型 可选 说明
text string 按钮文案
click function 按钮点击事件,回调参数为行数据
isShow boolean 是否显示,用于权限配置
type string text/button 按钮类型
config object type=button的props配置,或type=text时文字颜色等样式设置

tableProps

属性 类型 默认 说明
border boolean false 是否带有纵向边框
stripe boolean true 是否显示斑马线样式
type string 值为type=“selection” 时开启多选
emptyText string 没有更多数据 空数据时显示的文本内容

toolbarString

说明
export 导出按钮,默认文案:导出
exportChoose 导出已选按钮,默认文案:导出已选,组件内置导出功能,导出原始表格列表数据,与右上角列显隐无关,多级表头只导出子集表头,有配置enum的会转文案后输出
add 新增按钮,默认文案:新增
download 下载模板按钮,默认文案:下载模板
upload 导入按钮,默认文案:导入数据
delete 删除按钮,表格可选择时生效,默认文案:删除已选
column 列布局展示按钮
refresh 刷新按钮

paginationConfig

属性 类型 默认 说明
prevText string 上一页 左侧按钮文字
nextText string 下一页 右侧按钮文字
pageSize number 10 每页数据量
showIcon boolean false 是否以icon形式展示按钮,即‘上一页’‘下一页’变为图标形式

searchConfig

参考mosowe-formnameConfig配置,其中col,hide,visible配置无效文章来源地址https://www.toymoban.com/news/detail-414639.html

enumItem

属性 类型 说明
text string 文案
value string|number

exportSelectConfigObject

属性 类型 说明
type string 导出类型,支持:xls,html,csv,默认xls
filename string 导出文件名称,优先级 > title,都没有就默认时间戳

emits

事件 说明
onSearchChange 搜索区表单项值改变时,回调参数为name及值
onExport 导出按钮点击事件,回调参数为查询参数,导出功能的传参需要搜索区点击查询后方能生效
onAdd 新增按钮点击事件
onDownload 下载按钮点击事件,回调参数为查询参数
onUpload 导入数据按钮点击事件
onDelete 删除已选按钮点击事件,回调参数为表格已选数据列表
onSelectionChange 多选时选项改变事件,回调参数为已选数据列表
onSortChange th点击排序,回调参数obj
onFilterChange th点击筛选,回调参数obj

slots

slot 说明
search 搜索区插槽
toolbar 工具栏区插槽,作用域参数为{selectData,searchQuery}
toolbarLeft 工具栏左侧区插槽,作用域参数为{selectData,searchQuery},包含了title,export,add,download,delete按钮
toolbarRight 工具栏右侧区插槽,作用域参数为{selectData,searchQuery},包含了column,refresh按钮
rowOperation 表格行操作栏插槽,作用域参数为{index,rowData}
more 工具栏上方,搜索区下方插槽
under 分页下方底部区插槽
paginationLeft 分页区左侧插槽
[columnItem.value]Header 表格头部插槽,一级表头有效,作用域参数为{index,colnum}
[columnItem.value]Default 表格单元插槽,一级表头有效,作用域参数为{index,rowData,colnum}

示例代码

<template>
  <mosowe-table
    :column="column"
    :requestMethod="requestMethod"
    dataListKey="content"
    dataTotalKey="totalCount"
    rowOperationWidth="100"
    showIndex
    :tableProps="{
      type: 'selection'
    }"
    :rowOperation="rowOperation"
    @onAdd="onAdd"
    @onDelete="onDelete"
    @onSelectionChange="selectionChange"
    @onSortChange="onSortChange"
    @onSearchChange="onSearchChange"
  ></mosowe-table>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const app = getApp().globalData;
app?.checkLogin();

const requestMethod = (query: any) => {
  return new Promise((resolve) => {
    console.log('query', query);
    setTimeout(() => {
      resolve({
        code: 0,
        data: {
          content: Array.from({ length: query.pageSize }).map((_, index) => {
            return {
              name: '测试' + Date.now().toString().substring(9) + '-' + index,
              name2: '测试2',
              sex: index % 3,
              age: 20,
              date: Date.now()
            };
          }),
          totalCount: 100
        },
        msg: ''
      });
    }, 1000);
  });
};

const initBefore = (data: any) => {
  return {
    list: data.data.list.map((item: any) => ({ ...item, name: '我改了' })),
    total: data.data.total
  };
};
const onSortChange = (obj: any) =>{
  console.log('onSortChange',obj)
}

const selectionChange = (data: any) => {
  console.log('selectionChange',data)
}

const localData = Array.from({ length: 50 }).map((_, index) => {
  return {
    name: '测试',
    name2: '测试2',
    sex: index % 3,
    age: 20,
    date: Date.now()
  };
});
const rowOperation = [
  {
    text: '编辑',
    type: 'text',
    isShow: true,
    config: {
      color: '#409eff'
    },
    click: (row: any) => {
      console.log('编辑', row);
    }
  },
  {
    text: '删除',
    type: 'text',
    isShow: true,
    config: {
      sizi: 'mini',
      type: 'primary',
      style: {
        height: '20px',
        lineHeight: '20px',
        fontSize: '12px'
      }
    },
    click: (row: any) => {
      console.log('删除', row);
    }
  }
];

const onSearchChange = (name: any,value: any) => {
  console.log(name,value)
  if (name ==='name') {
    column.value[2].enum = [
      {
        text: '男',
        value: 0
      },
      {
        text: '女',
        value: 1
      }
    ]
  }
}

const column = ref([
  {
    text: '姓名',
    value: 'name',
    fixed: 'right',
    sortable: true,
    search: {
      type:'input',
      unionName: 'date=2023-02-01'
    }
  },
  {
    text: '姓名2',
    value: 'name2',
    width:'150',
    fixed: 'right'
  },
  {
    text: '性别',
    value: 'sex',
    width: '300',
    search: true,
    enum: [
      {
        text: '男',
        value: 0
      },
      {
        text: '女',
        value: 1
      },
      {
        text: '未知',
        value: 2
      }
    ]
  },
  {
    text: '年龄',
    value: 'age',
    search: true,
  },
  {
    text: '创建时间',
    value: 'date',
    searchOrder:12,
    search: {
      type: 'date',
      defaultValue: '2021-02-1',
      transform:(value: any)=>{
        return {
          time: value
        }
      }
    }
  }
]);

const onAdd = () => {
  console.log('onAdd');
};
const onDelete = (data: any) => {
  console.log('onDelete', data);
};
</script>

<style lang="scss" scoped></style>

到了这里,关于uniapp:mosowe-table高级表格组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue中element-ui表格组件el-table封装,在table表格中插入图片

            这次写的项目是写后台管理系统这部分,对于后台管理使用vue写,用组件的话,table组件用得次数比较多,可以封装一个table组件。         1.如封装的table组件:  :prop=\\\"item.prop\\\"  :label=\\\"item.label\\\"是必须要有的,其他的可以根据自己需要写 。 2.封装之后是就是使

    2024年02月15日
    浏览(56)
  • vue封装el-table表格组件

    先上效果图: 本文包含了具名插槽、作用域插槽、jsx语法三种: Render.vue( 很重要,必须有 ): Table.vue 使用Table组件

    2024年02月20日
    浏览(42)
  • ant-table组件表格数据做合计行,并固定在表格底部

    某些时候,我们表格展示数值型数据的时候,可能会想做一个合计处理,这样能直观的了解到当前列的总计数据信息。 遍观 Table组件 ,官方是没有提供这个功能的,这就需要我们自己处理了 根据表格的特性,合计行作为当前表格的多余一行,需要处理当前页的数据、条数(

    2024年02月09日
    浏览(51)
  • react + antdesign table组件合并行,展开子表格

     假如你有这样的一个数据: 需求如下: 代码实现:  

    2024年03月10日
    浏览(51)
  • Element UI 中的Table表格组件自定义行高与整个表格自适应高度

    1、:header-row-style=\\\"{height:\\\'30px\\\'}\\\" 设置表格列标题的高度为30像素。 2、:header-cell-style=\\\"{background:\\\'#f5f7fa\\\',padding:\\\'0px\\\'}\\\" 设置表格列标题的背景颜色。 3、:row-style=\\\"{height:\\\'30px\\\'}\\\" 设置每行的高度为30像素。 4、height=\\\"calc(100vh - 150px)\\\" 设置整个表格的高度。因为要自适应所以这个高度要用

    2024年02月12日
    浏览(50)
  • Vue3 - Element Plus 表格组件 table 隐藏鼠标移入时 hover 高亮背景色,el-table 组件去除鼠标悬停在表格行的 hover 高亮效果(完美解决表格合并后导致行错位)

    网上都是老文章了,本文提供的方案 100% 解决此问题。 本文 实现了在 vue3 + element plus 项目开发中,表格组件 el-table 鼠标移入时隐藏 hover 悬停高亮效果,当鼠标滑动到表格行时不要任何效果! 同时也解决了 “表格合并” 后带来的 hover 错位、异常显示等。 如下图所示,当鼠

    2024年02月21日
    浏览(68)
  • React学习时,自己拟定的一则小案例(table表格组件,含编辑)

    某次在Uniapp群看到有人问uniapp如何操作dom元素。 他想对这张表标红的区域,做dom元素获取,因为产品想让红色色块点击时,成为可编辑,渲染1~4月份之间的行程安排。 于是,有小伙伴说让他用position定位这里,点击时使红色色块层级抬高,弄个input上去。 但提问的小伙伴并没

    2024年02月07日
    浏览(39)
  • vxe-table 小众但功能齐全的vue表格组件

    一个基于 vue 的 PC 端表格组件,除了一般表格支持的增删改查、排序、筛选、对比、树形结构、数据分页等,它还支持虚拟滚动、懒加载、打印导出、虚拟列表、虚拟滚动、模态窗口、自定义模板、渲染器、贼灵活的配置项、扩展接口等,特别是能支持类似excel表格操作方式

    2024年02月08日
    浏览(49)
  • Vue中使用Element UI的Table组件实现嵌套表格(最简单示例)

    以下是一个简单的示例代码,演示如何在Vue中使用Element UI的Table组件实现嵌套表格: 上面的代码通过type=\\\"expand\\\"设置了一个展开按钮,点击该按钮会显示与当前行关联的子表格内容。 在上面的示例中,我们定义了一个包含姓名和年龄的主表格,以及一个展开列用于显示与每行

    2024年02月02日
    浏览(76)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包