# c-table 表格组件

<template>
  <CTable
    :tableData="tableData"
    :isShowPagination="true"
    :pageInfo="pageInfo"
  />
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          {
            date: "2016-05-02",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
            tag: "家",
          },
        ],
        pageInfo: {
          cpage: "1",
          total: 0,
          pageSize: 5,
          pageSizes: [10, 20, 30, 50],
        },
      };
    },
  };
</script>

Copy

# 属性

属性名	类型	默认值	说明
loading	boolean	false	该属性状态的改变一般用于接口发送前后
isShowPagination	boolean	false	是否显示页标组件
tableData	array	[]	具体参考 el-table 的该属性
tableConfig	array	[obj,obj,...]	配置列表的列元素及自定义渲染每个单元格的样式字段，obj 内键值对看下表详解

# tableConfig 详解

属性名	类型	类型	说明
prop	string	-	后端返回的数据对应的 key 值
width	string	-	列宽度（单位为 px）
fixed	boolean/string	-	列的固定属性
render	function	-	支持 vue 中的 h 渲染函数或者 JSX 对单元格进行重新渲染
label	string	-	表头显示的文字

# 方法

方法名	说明	参数
handleSizeChange	每页显示数量发生变化时触发	size-每页显示数量
handleCurrentChange	页数跳转时触发	page-跳转的具体页数

具体使用可见 hz 项目的非解除执法模块

← title 组件