Table 表格

用于展示多条结构类似的数据， 可对数据进行排序等操作。

地址

Github
文档网站
插件市场
QQ群

先看交互效果

基础用法

通过data设置表格数据。

<wd-table :data="dataList">  
  <wd-table-col prop="name" label="姓名"></wd-table-col>  
  <wd-table-col prop="school" label="求学之所"></wd-table-col>  
  <wd-table-col prop="major" label="专业"></wd-table-col>  
</wd-table>

const dataList = reactive([  
{  
  name: '赵云',  
  school: '武汉市阳逻妇幼保健学院',  
  major: '计算机科学与技术专业'  
},  
{  
  name: '孔明',  
  school: '武汉市阳逻卧龙学院',  
  major: '计算机科学与技术专业'  
},  
{  
  name: '刘备',  
  school: '武汉市阳逻编织学院',  
  major: '计算机科学与技术专业'  
}  
])

固定列

<wd-table :data="dataList">  
  <wd-table-col prop="name" label="姓名" fixed></wd-table-col>  
  <wd-table-col prop="school" label="求学之所"></wd-table-col>  
  <wd-table-col prop="major" label="专业"></wd-table-col>  
</wd-table>

斑马纹

通过stripe设置表格是否展示斑马纹，默认true。

<wd-table :data="dataList" :stripe="false">  
  <wd-table-col prop="name" label="姓名"></wd-table-col>  
  <wd-table-col prop="school" label="求学之所"></wd-table-col>  
  <wd-table-col prop="major" label="专业"></wd-table-col>  
</wd-table>

边框

通过border设置表格是否展示边框，默认true。

<wd-table :data="dataList" :border="false">  
  <wd-table-col prop="name" label="姓名"></wd-table-col>  
  <wd-table-col prop="school" label="求学之所"></wd-table-col>  
  <wd-table-col prop="major" label="专业"></wd-table-col>  
</wd-table>

表格高度

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

<wd-table :data="dataList" height="328px">  
  <wd-table-col prop="name" label="姓名"></wd-table-col>  
  <wd-table-col prop="school" label="求学之所"></wd-table-col>  
  <wd-table-col prop="major" label="专业"></wd-table-col>  
</wd-table>

排序事件

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

<wd-table :data="dataList" @sort-method="handleSort">  
  <wd-table-col prop="name" label="姓名"></wd-table-col>  
  <wd-table-col prop="school" label="求学之所" :sortable="true"></wd-table-col>  
  <wd-table-col prop="major" label="专业"></wd-table-col>  
</wd-table>

function handleSort(e) {  
  console.log('这里是排序事件')  
}

自定义列模板

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

<wd-table :data="dataList" @sort-method="handleSort">  
  <wd-table-col prop="name" label="姓名" fixed="true" width="320rpx" :sortable="true"></wd-table-col>  
  <wd-table-col prop="grade" label="分数" width="220rpx" :sortable="true">  
    <template #value="{row}">  
      <view class="custom-class">  
        <text>{{ row.grade }}</text>  
        <text>同比{{ row.compare }}</text>  
      </view>  
    </template>  
  </wd-table-col>  
  <wd-table-col prop="hobby" label="一言以蔽之" :sortable="true"></wd-table-col>  
  <wd-table-col prop="school" label="求学之所"></wd-table-col>  
  <wd-table-col prop="major" label="专业"></wd-table-col>  
  <wd-table-col prop="gender" label="性别"></wd-table-col>  
  <wd-table-col prop="graduation" label="学成时间"></wd-table-col>  
</wd-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 handleSort(e) {  
  dataList.value = dataList.value.reverse()  
}

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

Attributes

TableColumn Attributes

地址

Github
文档网站
插件市场
QQ群