mobile-table 適用于移動(dòng)端表格
基于
vue3開發(fā)的移動(dòng)端table表格組件
安裝
npm i mobile-table
// or
yarn add mobile-table
使用
// 導(dǎo)入組件
import { MobileTable, MobileTableColumn } from "mobile-table";
// 導(dǎo)入樣式
import "mobile-table/lib/style.css";
預(yù)覽
圖片預(yù)覽.png
操作預(yù)覽.gif
MobileTable 屬性說明
| 屬性名 | 說明 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|---|
| data | table 數(shù)據(jù) | Array | Array | |
| sortKey | 排序字段 | string | '' | |
| sortType | 排序類型 | number | 0 | |
| paging | 是開啟分頁 | boolean | false | |
| pageIndex | 分頁索引 | number | 1 | |
| pageTotal | 總分頁數(shù) | number | 1 |
MobileTable 事件說明
| 方法 | 說明 | 類型 | 說明 |
|---|---|---|---|
| sortChange | 排序字段和排序方法 變化 | Function | ({ sortKey: string, sortType: number })=> void |
| pageChange | pageIndex 分頁變化 | Function | (index: number)=> void |
MobileTableColumn 屬性說明
| 屬性名 | 說明 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|---|
| label | 對應(yīng)列名稱 | string | '' | |
| prop | 對應(yīng)列字段 | string | '' | |
| width | 對應(yīng)列的寬度 | number | auto | |
| sort | 對應(yīng)列是否開啟排序 | boolean | false | |
| align | 對應(yīng)列的對齊方式 | string | left |
left center right
|
基本用法
<template>
<MobileTable :data="data" >
<MobileTableColumn name="姓名" prop="name" />
<MobileTableColumn name="年齡" prop="age" />
<MobileTableColumn name="性別" prop="sex">
<template #default="scope">
<div>{{ scope.row.sex === 1 ? "男" : "女" }}</div>
</template>
</MobileTableColumn>
</MobileTable>
</template>
<script setup>
// 引入組件
import { MobileTable, MobileTableColumn } from "mobile-table";
import "mobile-table/lib/style.css";
import { ref } from "vue";
// 表格數(shù)據(jù)
const data = ref([
{
name: "張三",
age: 18,
sex: 1,
},
{
name: "李四",
age: 18,
sex: 1,
},
{
name: "王小紅",
age: 18,
sex: 2,
},
]);
</script>
<style scoped></style>
所有配置 支持分頁 支持排序
<template>
<MobileTable
:data="data"
:sortKey="sortKey"
:sortType="sortType"
:paging="isShowPaging"
:pageIndex="pageIndex"
:pageTotal="pageTotal"
@sortChange="onSortChange"
@pageChange="onPageChange"
>
<MobileTableColumn name="姓名" prop="name" />
<MobileTableColumn name="年齡" prop="age" :sort="true" />
<MobileTableColumn name="性別" prop="sex">
<template #default="scope">
<div>{{ scope.row.sex === 1 ? "男" : "女" }}</div>
</template>
</MobileTableColumn>
</MobileTable>
</template>
<script setup>
import { MobileTable, MobileTableColumn } from "mobile-table";
import "mobile-table/lib/style.css";
import { ref } from "vue";
// 表格數(shù)據(jù)
const data = ref([
{
name: "張三",
age: 18,
sex: 1,
},
{
name: "李四",
age: 18,
sex: 1,
},
{
name: "王小紅",
age: 18,
sex: 2,
},
]);
// 排序
const sortKey = ref("name");
const sortType = ref(1);
// 分頁
const isShowPaging = ref(true);
const pageIndex = ref(1);
const pageTotal = ref(12);
// 修改排序
function onSortChange(option = {}) {
sortKey.value = option.sortKey;
sortType.value = option.sortType;
}
// 修改分頁
function onPageChange(index) {
pageIndex.value = index;
}
</script>
<style scoped></style>
