vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3 mobile-table移动端表格

基于vue3开发mobile-table适用于移动端表格

作者：Taoqun

这篇文章主要给大家介绍了关于如何基于vue3开发mobile-table适用于移动端表格的相关资料,需要的朋友可以参考下

mobile-table 适用于移动端表格

基于vue3开发的移动端table表格组件

安装

npm i mobile-table
// or
yarn add mobile-table

使用

// 导入组件
import { MobileTable, MobileTableColumn } from "mobile-table";
// 导入样式
import "mobile-table/lib/style.css";

预览

MobileTable 属性说明

属性名说明类型默认值说明
datatable 数据ArrayArray
sortKey排序字段string‘’
sortType排序类型number0
paging是开启分页booleanfalse
pageIndex分页索引number1
pageTotal总分页数number1

MobileTable 事件说明

方法说明类型说明
sortChange排序字段和排序方法 变化Function({ sortKey: string, sortType: number })=> void
pageChangepageIndex 分页变化Function(index: number)=> void

MobileTableColumn 属性说明

属性名说明类型默认值说明
label对应列名称string‘’
prop对应列字段string‘’
width对应列的宽度numberauto
sort对应列是否开启排序booleanfalse
align对应列的对齐方式stringleftleft 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";

// 表格数据
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";

// 表格数据
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>

总结 

到此这篇关于如何基于vue3开发mobile-table适用于移动端表格的文章就介绍到这了,更多相关vue3 mobile-table移动端表格内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

阅读全文