更新记录

0.0.8（2023-09-26） 下载此版本

table 组件提供行点击事件 row-click

0.0.7（2023-06-05） 下载此版本

Table 组件支持取消排序

0.0.6（2023-06-04） 下载此版本

将公共依赖提取至hd-utils

查看更多

平台兼容性

Vue2 Vue3
× √
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.7.11 app-vue × √ √ × × √
钉钉小程序 快手小程序 飞书小程序 京东小程序
√ × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
√ √ √ √ × × × × ×

组件库官方文档：fant-mini-plus

组件库提供更多vue3组件，比单独引入更加强大

Table 表格

表格组件，支持表格内容上下左右滚动。

代码演示

基础用法

通过dataSource设置表格数据。

<hd-table :dataSource="dataList">
  <hd-table-column prop="name" label="姓名"></hd-table-column>
  <hd-table-column prop="school" label="求学之所"></hd-table-column>
  <hd-table-column prop="major" label="专业"></hd-table-column>
</hd-table>
const dataList = ref<Record<string,string>> ([
        {
          name: '赵云',
          school: '武汉市阳逻妇幼保健学院',
          major: '计算机科学与技术专业'
        },
        {
          name: '孔明',
          school: '武汉市阳逻卧龙学院',
          major: '计算机科学与技术专业'
        }
        {
          name: '刘备',
          school: '武汉市阳逻编织学院',
          major: '计算机科学与技术专业'
        }
      ])

斑马纹

通过stripe设置表格是否展示斑马纹，默认false(不展示)。

<hd-table :dataSource="dataList" :stripe="true">
  <hd-table-column prop="name" label="姓名"></hd-table-column>
  <hd-table-column prop="school" label="求学之所"></hd-table-column>
  <hd-table-column prop="major" label="专业"></hd-table-column>
</hd-table>

表格高度

通过height设置表格高度，默认为80vh。

<hd-table :dataSource="dataList" height="90vh">
  <hd-table-column prop="name" label="姓名"></hd-table-column>
  <hd-table-column prop="school" label="求学之所"></hd-table-column>
  <hd-table-column prop="major" label="专业"></hd-table-column>
</hd-table>

排序事件

当存在列参与排序时，点击会触发sort-method排序事件。

<hd-table :dataSource="dataList" @sort-method="doSort">
  <hd-table-column prop="name" label="姓名"></hd-table-column>
  <hd-table-column prop="school" label="求学之所" :sortable="true"></hd-table-column>
  <hd-table-column prop="major" label="专业"></hd-table-column>
</hd-table>
function doSort(e) {
  console.log('这里是排序事件')
}

自定义列模板

自定义列的显示内容，可组合其他组件使用。 通过 Scoped slot 可以获取到 row 的数据，用法参考 demo。

<hd-table :dataSource="dataList" :stripe="true" @sort-method="doSort">
  <hd-table-column prop="name" label="姓名" fixed="true" width="320rpx" :sortable="true"></hd-table-column>
  <hd-table-column prop="grade" label="分数" width="220rpx" :sortable="true">
    <template #default="scope: any">
      <view class="custom-class">
        <text>{{ scope.row.grade }}</text>
        <text>同比{{ scope.row.compare }}</text>
      </view>
    </template>
  </hd-table-column>
  <hd-table-column prop="hobby" label="一言以蔽之" :sortable="true"></hd-table-column>
  <hd-table-column prop="school" label="求学之所"></hd-table-column>
  <hd-table-column prop="major" label="专业"></hd-table-column>
  <hd-table-column prop="gender" label="性别"></hd-table-column>
  <hd-table-column prop="graduation" label="学成时间"></hd-table-column>
</hd-table>

import { ref } from 'vue'

const dataList = ref<Record<string, any>[]>([
  {
    name: '张飞',
    school: '武汉市阳逻杀猪学院',
    major: '计算机科学与技术专业',
    gender: '男',
    graduation: '2022年1月12日',
    grade: 56,
    compare: '10%',
    hobby: '燕人张飞在此！'
  },
  {
    name: '关羽',
    school: '武汉市阳逻绿豆学院',
    major: '计算机科学与技术专业',
    gender: '男',
    graduation: '2022年1月12日',
    grade: 66,
    compare: '11%',
    hobby: '颜良文丑，以吾观之，如土鸡瓦犬耳。'
  },
  {
    name: '刘备',
    school: '武汉市阳逻编织学院',
    major: '计算机科学与技术专业',
    gender: '男',
    graduation: '2022年1月12日',
    grade: 45,
    compare: '1%',
    hobby: '我得空明，如鱼得水也'
  },
  {
    name: '赵云',
    school: '武汉市阳逻妇幼保健学院',
    major: '计算机科学与技术专业',
    gender: '男',
    graduation: '2022年1月12日',
    grade: 69,
    compare: '14%',
    hobby: '子龙，子龙，世无双'
  },
  {
    name: '孔明',
    school: '武汉市阳逻卧龙学院',
    major: '计算机科学与技术专业',
    gender: '男',
    graduation: '2022年1月12日',
    grade: 88,
    compare: '21%',
    hobby: '兴汉讨贼，克复中原'
  },
  {
    name: '姜维',
    school: '武汉市阳逻停水停电技术学院',
    major: '计算机科学与技术专业',
    gender: '男',
    graduation: '2022年1月12日',
    grade: 87,
    compare: '32%',
    hobby: '我计不成，乃天命也！'
  }
])

/**
 * 排序
 * @param e
 */
function doSort(e) {
  dataList.value = dataList.value.reverse()
}

.custom-class {
  height: 80rpx;
  width: 220rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

Props

Name Description Type Required Default
dataSource table数据源 Array false []
stripe 是否为斑马纹 Boolean false false
height 表格高度 String false 默认值：'80vh'
rowHeight 行高 String/Number false 默认值：'80rpx'

Events

Event Name Description Parameters
sort-method 点击排序时触发 value:Object 当前列表头
row-click 点击行时触发 {rowIndex:number} 点击行的下标

Slots

Name Description Default Slot Content
default - -

Table-Column 表格列

表格组件的列元素。

代码演示

基础用法

通过prop设置表格该列的对应字段，并通过label设置表格该列的标题。

<hd-table-column prop="name" label="姓名"></hd-table-column>
<hd-table-column prop="school" label="求学之所"></hd-table-column>
<hd-table-column prop="major" label="专业"></hd-table-column>

列宽度

通过width设置表格该列的列宽度。

<hd-table-column prop="name" label="姓名" :width="90"></hd-table-column>

是否固定列

通过fixed设置表格该列是否固定，默认为false(不固定)，且只支持钉钉固定在左侧。

<hd-table-column prop="name" label="姓名" :fixed="true"></hd-table-column>
<hd-table-column prop="school" label="求学之所"></hd-table-column>
<hd-table-column prop="major" label="专业"></hd-table-column>

列排序

通过sortable设置表格该列是否参与排序，默认为false(不排序)。

<hd-table-column prop="name" label="姓名" :sortable="true"></hd-table-column>
<hd-table-column prop="school" label="求学之所" :sortable="true"></hd-table-column>
<hd-table-column prop="major" label="专业"></hd-table-column>

Props

<!-- @vuese:hd-table-column:props:start -->
Name Description Type Required Default
prop 列对应字段 String false -
label 列标题 String false -
width 列宽度 String false -
fixed 列是否固定 Boolean false false
sortable 是否开启列排序 Boolean false false
<!-- @vuese:hd-table-column:props:end -->

联系方式

有不明白或者建议可以扫码交流

联系我们

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...