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

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 属性说明

属性名	说明	类型	默认值
data	table 数据	array	array
sortkey	排序字段	string	‘’
sorttype	排序类型	number	0
paging	是开启分页	boolean	false
pageindex	分页索引	number	1
pagetotal	总分页数	number	1

mobiletable 事件说明

方法	说明	类型	说明
sortchange	排序字段和排序方法变化	function	({ sortkey: string, sorttype: number })=> void
pagechange	pageindex 分页变化	function	(index: number)=> void

mobiletablecolumn 属性说明

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

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