前端组件文档

# QTable

# 不分页表格

提示

1.prop 支持多级命名规范。

2.此组件为搭配Q-Print进行数据打印。


<template>
  <QPrint ref="QPrint" :show-print-button="false">
    <QTable :columns="exportColumn"
            @print="handlePrint"
            :showPrint="true"
    >
    </QTable>
  </QPrint>
</template>
<script>
  export default {
    methods: {
      handlePrint() {
        this.$refs.QPrint.print()
      },
    }
  }
</script>


<template>
  <div>
    <!-- 显示全部数据的表格 -->
    <QTable
        :data="tableData"
        :show-tool="false"
        :columns="tableColumns"
        :paginate="false"
        :ellipsis="false"
    >
      <template v-slot:supplier.supplierName="{ row }">
        <span>{{ row.supplier.supplierName }}</span>
      </template>
    </QTable>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        tableData: [
          {
            id: 1,
            date: "2022-01-01",
            supplier: {supplierName: "Supplier A"},
            pchmWay: "方式1",
            name: "Alice",
            province: "California",
            city: "Los Angeles",
            address: "123 Main St",
            zip: "90001",
          },
          {
            id: 2,
            date: "2022-01-02",
            supplier: {supplierName: "Supplier B"},
            pchmWay: "方式2",
            name: "Bob",
            province: "Ontario",
            city: "Toronto",
            address: "456 Queen St",
            zip: "M5H 2N2",
          },
          {
            id: 3,
            date: "2022-01-03",
            supplier: {supplierName: "Supplier C"},
            pchmWay: "方式3",
            name: "Charlie",
            province: "Texas",
            city: "Houston",
            address: "789 King St",
            zip: "77001",
          },
        ],
        tableColumns: [
          {type: 'selection', label: 'selection', visible: true},
          {type: 'index', label: '序号', visible: true},
          {label: "日期", prop: "date", width: '100px', visible: true},
          {label: "供应商名称", prop: "supplier.supplierName", width: "150px", visible: true},
          {label: "采购方式", prop: "pchmWay", width: "120px", visible: true},
          {
            label: "配送信息",
            prop: "info",
            visible: true,
            children: [
              {label: "姓名", prop: "name", width: '100px', visible: true},
              {
                label: "地址",
                prop: "address"
                , visible: true,
                children: [
                  {label: "省份", prop: "province", width: '100px', visible: true},
                  {label: "市区", prop: "city", visible: true},
                  {label: "地址", prop: "address", visible: true},
                  {label: "邮编", prop: "zip", visible: true},
                ],
              },
            ],
          },
        ],
      };
    },
  };
</script>
Expand Copy

# 分页表格


<template>
  <div>
    <!-- 分页表格 -->
    <QTable
        :data="tableData"
        :columns="tableColumns"
        :rowsPerPage="2"
        :show-tool="false"
        :paginate="true"
        :showTotalRow="true"
        :centerText="true"
        :ellipsis="true"
    >
      <template v-slot:supplier.supplierName="{ row }">
        <span>{{ row.supplier.supplierName }}</span>
      </template>
    </QTable>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        tableData: [
          {
            id: 1,
            date: "2022-01-01",
            supplier: {supplierName: "Supplier A"},
            pchmWay: "方式1",
            name: "Alice",
            province: "California",
            city: "Los Angeles",
            address: "123 Main St",
            zip: "90001",
            price: 100
          },
          {
            id: 2,
            date: "2022-01-02",
            supplier: {supplierName: "Supplier B"},
            pchmWay: "方式2",
            name: "Bob",
            province: "Ontario",
            city: "Toronto",
            address: "456 Queen St",
            zip: "M5H 2N2",
            price: 100
          },
          {
            id: 3,
            date: "2022-01-03",
            supplier: {supplierName: "Supplier C"},
            pchmWay: "方式3",
            name: "Charlie",
            province: "Texas",
            city: "Houston",
            address: "789 King St",
            zip: "77001",
            price: 100
          },
        ],
        tableColumns: [
          {label: "序号", type: "index", width: "150px"},
          {label: "日期", prop: "date", width: "150px"},
          {label: "金额", prop: "price", width: "150px", calculate: true},
          {label: "供应商名称", prop: "supplier.supplierName", width: "150px"},
          {label: "采购方式", prop: "pchmWay", width: "120px"},
          {
            label: "配送信息",
            children: [
              {label: "姓名", prop: "name", width: "120px"},
              {
                label: "地址",
                children: [
                  {label: "省份", prop: "province", width: "120px"},
                  {label: "市区", prop: "city", width: "120px"},
                  {label: "地址", prop: "address", width: "300px"},
                  {label: "邮编", prop: "zip", width: "120px"},
                ],
              },
            ],
          },
        ],
      };
    },
  };
</script>
Expand Copy

# Attributes

# Q-Table

属性名 说明 类型 可选值 默认值
data 表格数据 Array — []
columns 表格列名 Array columns []
rowsPerPage 分页大小 Number — 10
paginate 是否分页 Boolean — true
centerText 文字居中 Boolean — true
ellipsis 一行 Boolean — false
border 边框 Boolean — false
showTotalRow 显示合计(calculate为true) Boolean — false
number 保留小数(配套showTotalRow) Number — 0
loadAll 加载所有 Boolean — false
showTool 工具栏 Boolean — true
showExportAll 全部导出工具栏 Boolean — true
showPrint 打印工具栏 Boolean — false
fetch 获取数据函数 Function — —
fetchParams 数据参数 Object — {pageNum: 1,pageSize: 10}
batch 批次 Number — 5
timeout 防抖时间 Number — 1000
options 字典对象 Object — —
resConfig 返回数据格式 Object — —
tableStyle 表格样式 Object — —

# columns

提示

showTotalRow 为 true,type 为 column.type === 'index',开启序号列为合计

resConfig例子

const resConfig = {
    rowsPath: 'data.rows',
    totalPath: 'data.total'
}

tableStyle例子

const resConfig = {
    bodyHeight: '70px',
    headerHeight: '60px'
}

data 表示整个表格数据，row 表示当前行。

const columns = {
    prop: 'amount',
    label: '消费金额',
    func: (data, row) => {
        return row.operationType == 2 ? '- ' + row.amount : row.amount
    },
    visible: true
}
属性名 说明 类型 可选值 默认值
label 表头 String — —
prop 字段 String — —
type /pattern 类型 index /selection/ dict.xxx — —
visible 可见 Boolean — false
width 宽度 String /Number — auto
calculate 计算合计（需开启showTotalRow为true） Boolean — false
func 自定义函数 Function — -
children 子列 columns — —

# Events

事件名 说明 回调参数 参数说明
data 获取全部导出的数据 value 全部数据
selection 获取勾选导出的数据 value 勾选数据
print 打印按钮 — —
res 返回数据 value 返回数据

# Slots

属性名 说明 参数
prop 属性插槽 {index, row, scope}
footer 尾部插槽 —

# 安装

提示

所需要的依赖(指明依赖，无需再次install)

npm install lodash

← Q-Print 打印 →