快捷導(dǎo)航

基于vue3開發(fā)mobile-table適用于移動端表格

更新時間：2024年03月26日 08:27:39 作者：Taoqun

這篇文章主要給大家介紹了關(guān)于如何基于vue3開發(fā)mobile-table適用于移動端表格的相關(guān)資料,需要的朋友可以參考下

mobile-table 適用于移動端表格

基于vue3開發(fā)的移動端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ù)覽

MobileTable 屬性說明

屬性名	說明	類型	默認值
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 屬性說明

屬性名	說明	類型	默認值	說明
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>