Table 表格

表格组件

提示

表格组件默认跟随内容高度 宽度自动撑满父级组件-100%

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
√	√	√	√	√	√	√

表格属性

Name	Description	Type	Required	Default
columns	列配置项	Array	false	[]
data	表格数据源	Array	false	[]
emptyText	无数据提示语	—	false	'暂无数据'
stripe	是否条纹显示	—	false	true

columns结构

interface IColumn {
  // 列名
  name: string
  // 对应的从data中的取值属性
  prop: string
  // 单元格内容宽度 单位默认: rpx
  width: number
  // 3中值：true、'left'、'right'
  fixed: boolean | string
  // 插槽声明
  slot?: {
    // 插槽类型 目前支持：img、rank
    type: string
    condition?: string
    style?: object
  }
  // css的whiteSpace属性 用于控制单元格内容是否可以换行 默认换行
  whiteSpace: string
}

样式修改

提示

自行根据项目所属框架，采用所支持的v-deep or /deep/进行覆盖

示例

普通用法

<template>
  <pi-table :columns="baseUsed.columns" :data="baseUsed.data" />
</template>

<script>
  export default {
    data() {
      return {
        baseUsed: {
            columns: [{
            name: '项目名',
            prop: 'name',
          },
          {
            name: '负责人',
            prop: 'staffName',
          },
          {
            name: '联系方式',
            prop: 'mobile',
          },
          {
            name: '项目地址',
            prop: 'address',
          }],
        data: [
          {
            name: '测试项目一',
            staffName: '张三',
            mobile: '18202075971',
            address: '广东省珠海市前山左右创意园'
          },
          {
            name: '测试项目一',
            staffName: '张三',
            mobile: '18202075971',
            address: '广东省珠海市前山左右创意园'
          },
          {
            name: '测试项目一',
            staffName: '张三',
            mobile: '18202075971',
            address: '广东省珠海市前山左右创意园'
          }
        ]
      }
    }
      }
    }
  }
</script>