基础使用

引入组件

导入对应地址下的yui-table文件,导出默认定义组件

<script lang="ts">
// 引入yui-table组件
import {YuiTable} from "@/components/Table/index";
export default defineComponent({
    name: "xxxxx",
    components: {YuiTable},
});

</script>

使用组件

根据引入的组件名称在html中使用对应的组件标签，

这里组件名为默认的YuiTable，对应的标签为

<yui-table></yui-table>

数据接入

使用yui-table组件展示数据，需要传入

表头数据(:headerData)、行数据(:rowData)、控制类属性数据(:controlAtrr)(如，分页等) 从后台获取或前端定义相应数据对象，传入yui-table对应属性字段中。

<yui-table
    :rowData="rowData数据对象"
    :headerData="headerData数据对象"
    :controlAtrr="controlAtrr数据对象"
>
</yui-table>

数据结构说明

headerData 表头数据 json数组对象

主要的key值如下：

key值	说明
label	列名称
prop	列对应的数据字段名，对应rowData的key值
width	列宽
其他	其他key值根据实现功能增加设置

[
  {
    id: 100, 
    label: "日期", // 列名
    prop: "date", // prop对应rowData的key值
    width: "150", // 列宽
  },
  {
    id: 210,
    label: "姓名",
    prop: "name",
    width: "120",

  },
  {
    id: 220,
    label: "地址",
    prop: "address",
    width: "300",
  },
  {slot: "age"},
  {
    id: 230,
    label: "数值",
    prop: "num",
    width: "100",
  },
]

rowData 行数据 json数组对象

key值：列字段名

value值：列数据值

[
  {
    id: 1,
    date: '2016-05-02',
    name: '王小虎',
    age: '10岁',
    age_num: '10',
    num: '9',
    address: '上海市普陀区金沙江路 1518 弄',
    province: '上海',
    city: '上海',
    zip: '11011',
    hasChildren: true,
  },
  {
    id: 2,
    date: '2016-05-04',
    name: '王大虎',
    age: '120岁',
    age_num: 20,
    num: 120,
    address: '上海市普陀区金沙江路 1517 弄',
    province: '上海',
    city: '上海',
    zip: '11011',

  }
 ]

controlAtrr 控制类数据 json对象

参数名	说明
pageObj	分页相关配置对象
position	分页组件位置 right left
background	带有背景色的分页 false / true
small	小型分页 false / true；当表格本身已设置大小时，这里跟随表格大小配置联动
hide_on_single_page	当只有一页时隐藏分页 false / true
pager_count	设置最大页码按钮数
page_sizes	接受一个整型数组，数组元素为展示的选择每页显示个数的选项
layout	表示需要显示的内容，用逗号分隔，布局元素会依次显示。total(总页数)，sizes(页大小选择)，prev(上一页)，pager(分页区域)，next(下一页)，jumper(跳转页面)
total	数据总条数
pageData.page	当前页码
pageData.size	当前页面大小(每页数据条数)

{
  pageObj: { //分页对象
    position: "right", //分页组件位置 right left
    background: false, // 带有背景色的分页 false / true
    small: true, // 小型分页 false / true
    hide_on_single_page: true, // 当只有一页时隐藏分页
    pager_count: 5, // 设置最大页码按钮数
    // 接受一个整型数组，数组元素为展示的选择每页显示个数的选项
    page_sizes: [10, 15, 20, 30, 50, 200],  
     // 表示需要显示的内容，用逗号分隔，布局元素会依次显示。
    layout: "total,sizes,prev, pager, next,jumper",
    total: 10, // 总条数
    pageData: {
      page: 1,  // 页数
      size: 10  // 每页条数
    }
  }
}

页面效果

图片base_table

# 基础使用

# 引入组件

# 使用组件

# 数据接入

# 数据结构说明

# headerData 表头数据 json数组对象

# rowData 行数据 json数组对象

# controlAtrr 控制类数据 json对象

# 页面效果