Pui基础组件文档库

# PAntLayoutTable 默认 table 布局组件

# 常规表格

取料地
取料地
取料地
取料地
取料地
取料地
物料名称
产地
取样时间点
接收机构
类型
状态
年龄：
19
姓名：
张三
学科：
数学
性别：
男
分数：
90
京环-new2点半BBQ煤炉总调度室球团3期竖炉01
年龄：
19
姓名：
张三2
学科：
语文
性别：
男
分数：
99
测试场地12点总调度室112烧结厂21
年龄：
19
姓名：
张三3
学科：
英语
性别：
男
分数：
90
二期喷煤厂20点08点总调度室112烧结厂01
<template>
  <p-layout-page>
    <p-layout-page-item>
      <p-ant-layout-table
        :columns="columns"
        :dataSource="sourceData"
        :tableOpt="{bordered:true,scroll: {x: '110%'}}"
      >
        <template #materialName="{text}">
          <a-button>{{text}}</a-button>
        </template>
      </p-ant-layout-table>
    </p-layout-page-item>
  </p-layout-page>
</template>
<script>
export default {
  name: 'baseTable',
  data () {
    return {
      // 表头
      columns: [
        {
          title: '取料地',
          width: 180,
          minWidth: 180,
          dataIndex: 'addrName',
          key: "addrName",
          customRender: (text) => {
            const fixInfo = {
              age: '年龄：',
              name: '姓名：',
              course: '学科：',
              sex: '性别：',
              grade: '分数：'
            }
            const flex = {
              display: 'flex'
            }
            return (
              <div>{
                text && Object.keys(fixInfo).map(item => {
                  return (
                    <div style={flex}>
                      <div style="color:#8C8C8C;">{fixInfo[item]}</div>
                      <div style="color:#000;">{text[item] === undefined ? '' : text[item]}</div>
                    </div>
                  )
                })
              }
              </div>
            )
          }
        },
        {
          title: '取料地',
          width: 180,
          minWidth: 180,
          dataIndex: 'addrName99',
          key: "addrName99",
          customRender: (text) => {
            const fixInfo = {
              age: '年龄：',
              name: '姓名：',
              course: '学科：',
              sex: '性别：',
              grade: '分数：'
            }
            const flex = {
              display: 'flex'
            }
            return (
              <div>{
                text && Object.keys(fixInfo).map(item => {
                  return (
                    <div style={flex}>
                      <div style="color:#8C8C8C;">{fixInfo[item]}</div>
                      <div style="color:#000;">{text[item] === undefined ? '' : text[item]}</div>
                    </div>
                  )
                })
              }
              </div>
            )
          }
        },
        {
          title: '取料地',
          width: 180,
          minWidth: 180,
          dataIndex: 'addrName29',
          key: "addrName29",
          customRender: (text) => {
            const fixInfo = {
              age: '年龄：',
              name: '姓名：',
              course: '学科：',
              sex: '性别：',
              grade: '分数：'
            }
            const flex = {
              display: 'flex'
            }
            return (
              <div>{
                text && Object.keys(fixInfo).map(item => {
                  return (
                    <div style={flex}>
                      <div style="color:#8C8C8C;">{fixInfo[item]}</div>
                      <div style="color:#000;">{text[item] === undefined ? '' : text[item]}</div>
                    </div>
                  )
                })
              }
              </div>
            )
          }
        },
        {
          title: '取料地',
          width: 180,
          minWidth: 180,
          dataIndex: 'addrName19',
          key: "addrName19",
          customRender: (text) => {
            const fixInfo = {
              age: '年龄：',
              name: '姓名：',
              course: '学科：',
              sex: '性别：',
              grade: '分数：'
            }
            const flex = {
              display: 'flex'
            }
            return (
              <div>{
                text && Object.keys(fixInfo).map(item => {
                  return (
                    <div style={flex}>
                      <div style="color:#8C8C8C;">{fixInfo[item]}</div>
                      <div style="color:#000;">{text[item] === undefined ? '' : text[item]}</div>
                    </div>
                  )
                })
              }
              </div>
            )
          }
        },
        {
          title: '取料地',
          width: 180,
          minWidth: 180,
          dataIndex: 'addrName59',
          key: "addrName59",
          customRender: (text) => {
            const fixInfo = {
              age: '年龄：',
              name: '姓名：',
              course: '学科：',
              sex: '性别：',
              grade: '分数：'
            }
            const flex = {
              display: 'flex'
            }
            return (
              <div>{
                text && Object.keys(fixInfo).map(item => {
                  return (
                    <div style={flex}>
                      <div style="color:#8C8C8C;">{fixInfo[item]}</div>
                      <div style="color:#000;">{text[item] === undefined ? '' : text[item]}</div>
                    </div>
                  )
                })
              }
              </div>
            )
          }
        },
        {
          title: '取料地',
          width: 180,
          minWidth: 180,
          dataIndex: 'addrName79',
          key: "addrName79",
          customRender: (text) => {
            const fixInfo = {
              age: '年龄：',
              name: '姓名：',
              course: '学科：',
              sex: '性别：',
              grade: '分数：'
            }
            const flex = {
              display: 'flex'
            }
            return (
              <div>{
                text && Object.keys(fixInfo).map(item => {
                  return (
                    <div style={flex}>
                      <div style="color:#8C8C8C;">{fixInfo[item]}</div>
                      <div style="color:#000;">{text[item] === undefined ? '' : text[item]}</div>
                    </div>
                  )
                })
              }
              </div>
            )
          }
        },
        {
          title: '物料名称',
          width: 100,
          dataIndex: 'materialName',
          scopedSlots: { customRender: 'materialName' }
        },
        {
          title: '产地',
          width: 100,
          dataIndex: 'materialProducingArea'
        },
        {
          title: '取样时间点',
          width: 100,
          dataIndex: 'timeNames'
        },
        {
          title: '接收机构',
          width: 280,
          dataIndex: 'usingDeptNames'
        },
        {
          title: '类型',
          width: 100,
          dataIndex: 'samplingType'
        },
        {
          title: '状态',
          width: 100,
          dataIndex: 'status'
        }
      ],
      // 数据源
      sourceData: [
        {
          id: 85,
          addrName: {
            age: 19,
            name: '张三',
            sex: '男',
            course: '数学',
            grade: 90
          },
          materialName: '卡粉-new',
          materialProducingArea: '京环-new',
          samplingType: 0,
          status: 1,
          timeNames: ['2点半'],
          usingDeptNames: ['BBQ煤炉', '总调度室', '球团3期', '竖炉']
        },
        {
          id: 80,
          addrName: {
            sex: '男',
            age: 19,
            name: '张三2',
            course: '语文',
            grade: 99
          },
          materialName: '测试物料',
          materialProducingArea: '测试场地',
          samplingType: 2,
          status: 1,
          timeNames: ['12点'],
          usingDeptNames: ['总调度室', '112烧结厂']
        },
        {
          id: 79,
          addrName: {
            age: 19,
            name: '张三3',
            sex: '男',
            course: '英语',
            grade: 90
          },
          materialName: '喷煤',
          materialProducingArea: '二期喷煤厂',
          samplingType: 0,
          status: 1,
          timeNames: ['20点', '08点'],
          usingDeptNames: ['总调度室', '112烧结厂']
        }
      ]
    }
  },
  // 方法
  methods: {
    // switch 改变状态
    onStatusChange (value, record) {
      console.log(value, record)
    }
  }
}
</script>
显示代码

# 自定义渲染列数据

取料地
物料名称
产地
取样时间点
接收机构
类型
状态
916料场卡粉-new京环-new2点半
BBQ煤炉,总调度室,球团3期,竖炉
常规
一号料场测试物料测试场地12点
总调度室,112烧结厂
通用
一号料场喷煤二期喷煤厂20点,08点
总调度室,112烧结厂
常规

操作customRender属性,接收机构提示tooltip

<template>
  <p-layout-page>
    <p-layout-page-item>
      <p-ant-layout-table :columns="columns" :dataSource="sourceData" />
    </p-layout-page-item>
  </p-layout-page>
</template>
<script>
export default {
  name: 'customRender',
  data() {
    return {
      // 表头
      columns: [
        {
          title: '取料地',
          dataIndex: 'addrName'
        },
        {
          title: '物料名称',
          dataIndex: 'materialName'
        },
        {
          title: '产地',
          dataIndex: 'materialProducingArea'
        },
        {
          title: '取样时间点',
          dataIndex: 'timeNames',
          customRender: (text) => {
            return text.toString()
          }
        },
        {
          title: '接收机构',
          dataIndex: 'usingDeptNames',
          customRender: (text, record) => {
            return {
              children: this.$createElement('div', {}, [
                this.$createElement(
                  'a-tooltip',
                  {
                    attrs: { title: text.toString() }
                  },
                  [
                    this.$createElement('span', {
                      domProps: { innerHTML: text.toString() },
                      style: {
                        maxWidth: 160,
                        overflow: 'hidden',
                        whiteSpace: 'nowrap',
                        textOverflow: 'ellipsis',
                        cursor: 'pointer'
                      }
                    })
                  ]
                )
              ])
            }
          }
        },
        {
          title: '类型',
          dataIndex: 'samplingType',
          customRender: (text) => {
            if (text == 0) {
              return '常规'
            }
            if (text == 1) {
              return '非常规'
            }
            if (text == 2) {
              return '通用'
            }
          }
        },
        {
          title: '状态',
          dataIndex: 'status',
          isCustomRender: true,
          customRender: (text, record) => {
            return {
              children: this.$createElement('div', {}, [
                this.$createElement('a-switch', {
                  attrs: { checked: Boolean(record.status), size: 'small' },
                  on: {
                    change: (val) => {
                      this.onStatusChange(val, record)
                    }
                  }
                })
              ])
            }
          }
        }
      ],
      // 数据源
      sourceData: [
        {
          id: 85,
          addrName: '916料场',
          materialName: '卡粉-new',
          materialProducingArea: '京环-new',
          samplingType: 0,
          status: 1,
          timeNames: ['2点半'],
          usingDeptNames: ['BBQ煤炉', '总调度室', '球团3期', '竖炉']
        },
        {
          id: 80,
          addrName: '一号料场',
          materialName: '测试物料',
          materialProducingArea: '测试场地',
          samplingType: 2,
          status: 1,
          timeNames: ['12点'],
          usingDeptNames: ['总调度室', '112烧结厂']
        },
        {
          id: 79,
          addrName: '一号料场',
          materialName: '喷煤',
          materialProducingArea: '二期喷煤厂',
          samplingType: 0,
          status: 1,
          timeNames: ['20点', '08点'],
          usingDeptNames: ['总调度室', '112烧结厂']
        }
      ]
    }
  },
  // 方法
  methods: {
    // switch 改变状态
    onStatusChange(value, record) {
      console.log(value, record)
    }
  }
}
</script>
显示代码

# 自定义列表左侧 title

样品列表444

取料地
物料名称
产地
取样时间点
接收机构
类型
状态
916料场卡粉-new京环-new2点半BBQ煤炉,总调度室,球团3期,竖炉常规
一号料场测试物料测试场地12点总调度室,112烧结厂通用
一号料场喷煤二期喷煤厂20点,08点总调度室,112烧结厂常规
添加`title`属性

<template>
  <p-layout-page>
    <p-layout-page-item>
      <p-ant-layout-table title="样品列表444" :columns="columns" :dataSource="sourceData" />
    </p-layout-page-item>
  </p-layout-page>
</template>
<script>
export default {
  name: 'titleTable',
  data () {
    return {
      // 表头
      columns: [
        {
          title: '取料地',
          dataIndex: 'addrName'
        },
        {
          title: '物料名称',
          dataIndex: 'materialName'
        },
        {
          title: '产地',
          dataIndex: 'materialProducingArea'
        },
        {
          title: '取样时间点',
          dataIndex: 'timeNames',
          customRender: (text) => {
            return text.toString()
          }
        },
        {
          title: '接收机构',
          dataIndex: 'usingDeptNames',
          customRender: (text) => {
            return text.toString()
          }
        },
        {
          title: '类型',
          dataIndex: 'samplingType',
          customRender: (text) => {
            if (text == 0) {
              return '常规'
            }
            if (text == 1) {
              return '非常规'
            }
            if (text == 2) {
              return '通用'
            }
          }
        },
        {
          title: '状态',
          dataIndex: 'status',
          isCustomRender: true,
          customRender: (text, record) => {
            return {
              children: this.$createElement('div', {}, [
                this.$createElement('a-switch', {
                  attrs: { checked: Boolean(record.status), size: 'small' },
                  on: {
                    change: (val) => {
                      this.onStatusChange(val, record)
                    }
                  }
                })
              ])
            }
          }
        }
      ],
      // 数据源
      sourceData: [
        {
          id: 85,
          addrName: '916料场',
          materialName: '卡粉-new',
          materialProducingArea: '京环-new',
          samplingType: 0,
          status: 1,
          timeNames: ['2点半'],
          usingDeptNames: ['BBQ煤炉', '总调度室', '球团3期', '竖炉']
        },
        {
          id: 80,
          addrName: '一号料场',
          materialName: '测试物料',
          materialProducingArea: '测试场地',
          samplingType: 2,
          status: 1,
          timeNames: ['12点'],
          usingDeptNames: ['总调度室', '112烧结厂']
        },
        {
          id: 79,
          addrName: '一号料场',
          materialName: '喷煤',
          materialProducingArea: '二期喷煤厂',
          samplingType: 0,
          status: 1,
          timeNames: ['20点', '08点'],
          usingDeptNames: ['总调度室', '112烧结厂']
        }
      ]
    }
  },
  // 方法
  methods: {
    // switch 改变状态
    onStatusChange (value, record) {
      console.log(value, record)
    }
  }
}
</script>
显示代码

# table 插槽

table插槽，默认table将不渲染

  • 共 0 条
  • 0
  • 10 / page

table插槽，默认table将不渲染

<template>
  <p-layout-page>
    <p-layout-page-item>
      <p-ant-layout-table
        title="table插槽，默认table将不渲染"
        @paginationChange="handleTableChange"
        :pagination="pageOpt"
      >
        <!-- 表格外操作| -->
        <template #btn>
          <a-button type="primary" icon="plus">新增</a-button>
          <a-button type="primary" :disabled="selectedRowKeys.length === 0 ">重新处理</a-button>
          <a-button type="primary" :disabled="selectedRowKeys.length === 0 ">作废</a-button>
        </template>
        <template #table>
          <p-table
            columnSetting
            name="AntTableSlot"
            :table="table"
            :columns="PtableColumns"
            @selection-change="selectionChange"
          >
            <template #amount="{param}">{{param.row.amount}}</template>
          </p-table>
        </template>
      </p-ant-layout-table>
    </p-layout-page-item>
  </p-layout-page>
</template>
<script>
export default {
  name: 'tableSlot',
  data() {
    return {
      table: {
        firstColumn: { type: 'selection' },
        data: [
          {
            id: '1',
            date: '2019-09-25',
            name: '张三',
            status: '2',
            amount: 3000,
            address: '广东省广州市天河区'
          },
          {
            id: '2',
            date: '2019-09-26',
            name: '张三1',
            status: '2',
            amount: 2000,
            address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2'
          },
          {
            id: '3',
            date: '2019-09-27',
            name: '张三2',
            status: '3',
            amount: 4000,
            address: '广东省广州市天河区3'
          }
        ]
      },
      PtableColumns: [
        { prop: 'name', label: '姓名', minWidth: '100' },
        { prop: 'date', label: '日期', minWidth: '160' },
        { prop: 'address', label: '地址', minWidth: '220' },
        { prop: 'status', label: '状态', minWidth: '100' },
        { prop: 'amount', label: '金额', minWidth: '160', slotName: 'amount' },
        { prop: 'address77', label: '地址77', minWidth: '220' },
        { prop: 'name1', label: '姓名1', minWidth: '100' },
        { prop: 'date22', label: '日期22', minWidth: '180' },
        { prop: 'address33', label: '地址33', minWidth: '220' },
        { prop: 'name44', label: '姓名44', minWidth: '100' },
        { prop: 'date55', label: '日期55', minWidth: '180' },
        { prop: 'address66', label: '地址66', minWidth: '220' }
      ],
      // 复选框选中项
      selectedRowKeys: [],
      // 分页器参数
      pageOpt: {
        current: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  // 方法
  methods: {
    // 获取当前选择页数
    handleTableChange(val) {
      console.log(1212, val)
    },
    // 复选框选中
    selectionChange(val) {
      console.log('复选框选中值', val)
      this.selectedRowKeys = val
    }
  }
}
</script>
<style lang="scss">
.dh_grid_table {
  th,
  td {
    border: none;
    padding: 0;
  }
}
</style>
显示代码

# 显示分页器

样品列表

取料地
物料名称
产地
取样时间点
接收机构
类型
状态
916料场卡粉-new京环-new2点半BBQ煤炉,总调度室,球团3期,竖炉常规
一号料场测试物料测试场地12点总调度室,112烧结厂通用
一号料场喷煤二期喷煤厂20点,08点总调度室,112烧结厂常规
  • 共 0 条
  • 0
  • 10 / page

添加pagination属性

<template>
  <p-layout-page>
    <p-layout-page-item>
      <p-ant-layout-table
        title="样品列表"
        :pagination="pageOpt"
        column-setting
        @showSizeChange="onShowSizeChange"
        @paginationChange="handleTableChange"
        :columns="columns"
        :dataSource="sourceData"
      />
    </p-layout-page-item>
  </p-layout-page>
</template>
<script>
export default {
  name: 'pagination',
  data () {
    return {
      // 分页器参数
      pageOpt: {
        current: 1,
        pageSize: 10,
        total: 0,
        paginationOpt:{
          showSizeChanger:true
        }
      },
      // 表头
      columns: [
        {
          title: '取料地',
          dataIndex: 'addrName',
          width: 100
        },
        {
          title: '物料名称',
          dataIndex: 'materialName',
          width: 160
        },
        {
          title: '产地',
          dataIndex: 'materialProducingArea',
          width: 160
        },
        {
          title: '取样时间点',
          dataIndex: 'timeNames',
          width: 160,
          customRender: (text) => {
            return text.toString()
          }
        },
        {
          title: '接收机构',
          dataIndex: 'usingDeptNames',
          customRender: (text) => {
            return text.toString()
          }
        },
        {
          title: '类型',
          dataIndex: 'samplingType',
          width: 100,
          customRender: (text) => {
            if (text == 0) {
              return '常规'
            }
            if (text == 1) {
              return '非常规'
            }
            if (text == 2) {
              return '通用'
            }
          }
        },
        {
          title: '状态',
          dataIndex: 'status',
          width: 100,
          isCustomRender: true,
          customRender: (text, record) => {
            return {
              children: this.$createElement('div', {}, [
                this.$createElement('a-switch', {
                  attrs: { checked: Boolean(record.status), size: 'small' },
                  on: {
                    change: (val) => {
                      this.onStatusChange(val, record)
                    }
                  }
                })
              ])
            }
          }
        }
      ],
      // 数据源
      sourceData: [
        {
          id: 85,
          addrName: '916料场',
          materialName: '卡粉-new',
          materialProducingArea: '京环-new',
          samplingType: 0,
          status: 1,
          timeNames: ['2点半'],
          usingDeptNames: ['BBQ煤炉', '总调度室', '球团3期', '竖炉']
        },
        {
          id: 80,
          addrName: '一号料场',
          materialName: '测试物料',
          materialProducingArea: '测试场地',
          samplingType: 2,
          status: 1,
          timeNames: ['12点'],
          usingDeptNames: ['总调度室', '112烧结厂']
        },
        {
          id: 79,
          addrName: '一号料场',
          materialName: '喷煤',
          materialProducingArea: '二期喷煤厂',
          samplingType: 0,
          status: 1,
          timeNames: ['20点', '08点'],
          usingDeptNames: ['总调度室', '112烧结厂']
        }
      ]
    }
  },
  // 方法
  methods: {
    // switch 改变状态
    onStatusChange (value, record) {
      console.log(value, record)
    },
    // 获取当前选择页数
    handleTableChange (val) {
      console.log(1212, val)
    },
    onShowSizeChange (current, pageSize) {
      console.log(33, current, pageSize)
      this.pageOpt.pageSize = pageSize
    }
  }
}
</script>
显示代码

# 显示表格内外操作按钮

样品列表

取料地
物料名称
产地
取样时间点
接收机构
类型
状态
操作
916料场卡粉-new京环-new2点半
BBQ煤炉,总调度室,球团3期,竖炉
常规
一号料场测试物料测试场地12点
总调度室,112烧结厂
通用
一号料场喷煤二期喷煤厂20点,08点
总调度室,112烧结厂
常规
操作
  • 共 0 条
  • 0
  • 10 / page

表格内操作使用customRender；表格外操作需要添加slot=btn

<template>
  <p-layout-page>
    <p-layout-page-item>
      <p-ant-layout-table
        title="样品列表"
        :pagination="pageOpt"
        @paginationChange="handleTableChange"
        :columns="columns"
        :dataSource="sourceData"
      >
        <!-- 表格外操作| -->
        <template #btn>
          <a-button type="primary" icon="plus" @click="creat">新增</a-button>
          <a-button type="primary" @click="anew">重新处理</a-button>
          <a-button type="primary" @click="toVoids">作废</a-button>
        </template>
      </p-ant-layout-table>
    </p-layout-page-item>
  </p-layout-page>
</template>
<script>
export default {
  name: 'operation',
  data() {
    return {
      // 分页器参数
      pageOpt: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      // 表头
      columns: [
        {
          title: '取料地',
          dataIndex: 'addrName',
          width: 100
        },
        {
          title: '物料名称',
          dataIndex: 'materialName',
          width: 160
        },
        {
          title: '产地',
          dataIndex: 'materialProducingArea',
          width: 160
        },
        {
          title: '取样时间点',
          dataIndex: 'timeNames',
          width: 160,
          customRender: (text) => {
            return text.toString()
          }
        },
        {
          title: '接收机构',
          dataIndex: 'usingDeptNames',
          customRender: (text, record) => {
            return {
              children: this.$createElement('div', {}, [
                this.$createElement(
                  'a-tooltip',
                  {
                    attrs: { title: text.toString() }
                  },
                  [
                    this.$createElement('span', {
                      domProps: { innerHTML: text.toString() },
                      style: {
                        maxWidth: 160,
                        overflow: 'hidden',
                        whiteSpace: 'nowrap',
                        textOverflow: 'ellipsis',
                        cursor: 'pointer'
                      }
                    })
                  ]
                )
              ])
            }
          }
        },
        {
          title: '类型',
          dataIndex: 'samplingType',
          width: 100,
          customRender: (text) => {
            if (text == 0) {
              return '常规'
            }
            if (text == 1) {
              return '非常规'
            }
            if (text == 2) {
              return '通用'
            }
          }
        },
        {
          title: '状态',
          dataIndex: 'status',
          width: 100,
          isCustomRender: true,
          customRender: (text, record) => {
            return {
              children: this.$createElement('div', {}, [
                this.$createElement('a-switch', {
                  attrs: { checked: Boolean(record.status), size: 'small' },
                  on: {
                    change: (val) => {
                      this.onStatusChange(val, record)
                    }
                  }
                })
              ])
            }
          }
        },
        {
          title: '操作',
          dataIndex: 'handler',
          width: '120px',
          fixed: 'right',
          isCustomRender: true,
          customRender: (text, record) => {
            return {
              children: this.$createElement('div', {}, [
                this.$createElement(
                  'a-popconfirm',
                  {
                    attrs: { title: '你确定要删除吗？' },
                    on: { confirm: this.del.bind(this, record) }
                  },
                  [
                    this.$createElement('a-button', {
                      domProps: { innerHTML: '删除' },
                      attrs: { type: 'link' },
                      style: { padding: '0 5px 0 0' }
                    })
                  ]
                ),
                this.$createElement('a-button', {
                  domProps: { innerHTML: '修改' },
                  attrs: { type: 'link' },
                  on: { click: this.edit.bind(this, record) },
                  style: { padding: '0 0 0 5px' }
                })
              ])
            }
          }
        }
      ],
      // 数据源
      sourceData: [
        {
          id: 85,
          addrName: '916料场',
          materialName: '卡粉-new',
          materialProducingArea: '京环-new',
          samplingType: 0,
          status: 1,
          timeNames: ['2点半'],
          usingDeptNames: ['BBQ煤炉', '总调度室', '球团3期', '竖炉']
        },
        {
          id: 80,
          addrName: '一号料场',
          materialName: '测试物料',
          materialProducingArea: '测试场地',
          samplingType: 2,
          status: 1,
          timeNames: ['12点'],
          usingDeptNames: ['总调度室', '112烧结厂']
        },
        {
          id: 79,
          addrName: '一号料场',
          materialName: '喷煤',
          materialProducingArea: '二期喷煤厂',
          samplingType: 0,
          status: 1,
          timeNames: ['20点', '08点'],
          usingDeptNames: ['总调度室', '112烧结厂']
        }
      ]
    }
  },
  // 方法
  methods: {
    // switch 改变状态
    onStatusChange(value, record) {
      console.log(value, record)
    },
    // 获取当前选择页数
    handleTableChange(val) {
      console.log(1212, val)
    },
    /**
     * 表格外操作
     */
    // 新增
    creat() {
      console.log('新增操作')
    },
    // 重新处理操作
    anew() {
      console.log('重新处理操作')
    },
    // 作废操作
    toVoids() {
      console.log('作废操作')
    },
    /**
     * 表格内操作
     */
    // 删除
    del(row) {
      console.log('删除操作', row)
    },
    // 编辑
    edit(row) {
      console.log('编辑操作', row)
    }
  }
}
</script>
显示代码

# 配置 ant-design-vue table 属性（复选框）

样品列表222

取料地
物料名称
产地
取样时间点
接收机构
类型
状态
操作
916料场卡粉-new京环-new2点半
BBQ煤炉,总调度室,球团3期,竖炉
常规
一号料场测试物料测试场地12点
总调度室,112烧结厂
通用
一号料场喷煤二期喷煤厂20点,08点
总调度室,112烧结厂
常规
  • 共 0 条
  • 0
  • 10 / page

配置tableOpt属性，参考Antd table组件文档 (opens new window)"

<template>
  <p-layout-page>
    <p-layout-page-item>
      <p-ant-layout-table
        title="样品列表222"
        column-setting
        :pagination="pageOpt"
        @paginationChange="handleTableChange"
        :columns="columns"
        :dataSource="sourceData"
        :tableOpt="{rowSelection: {selectedRowKeys: selectedRowKeys, onChange: onSelectChange},bordered:true}"
      >
        <!-- 表格外操作| -->
        <template #btn>
          <a-button type="primary" icon="plus" @click="creat">新增</a-button>
          <a-button type="primary" @click="anew" :disabled="selectedRowKeys.length === 0 ">重新处理</a-button>
          <a-button type="primary" @click="toVoids" :disabled="selectedRowKeys.length === 0 ">作废</a-button>
        </template>
      </p-ant-layout-table>
    </p-layout-page-item>
  </p-layout-page>
</template>
<script>
export default {
  name: 'rowSelection',
  data () {
    return {
      // 复选框选中项
      selectedRowKeys: [],
      // 分页器参数
      pageOpt: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      // 表头
      columns: [
        {
          title: '取料地',
          dataIndex: 'addrName',
          width: 100
        },
        {
          title: '物料名称',
          dataIndex: 'materialName',
          width: 160
        },
        {
          title: '产地',
          dataIndex: 'materialProducingArea',
          width: 160
        },
        {
          title: '取样时间点',
          dataIndex: 'timeNames',
          width: 160,
          customRender: (text) => {
            return text.toString()
          }
        },
        {
          title: '接收机构',
          dataIndex: 'usingDeptNames',
          width: 160,
          customRender: (text, record) => {
            return {
              children: this.$createElement('div', {}, [
                this.$createElement(
                  'a-tooltip',
                  {
                    attrs: { title: text.toString() }
                  },
                  [
                    this.$createElement('span', {
                      domProps: { innerHTML: text.toString() },
                      style: {
                        maxWidth: 160,
                        overflow: 'hidden',
                        whiteSpace: 'nowrap',
                        textOverflow: 'ellipsis',
                        cursor: 'pointer'
                      }
                    })
                  ]
                )
              ])
            }
          }
        },
        {
          title: '类型',
          dataIndex: 'samplingType',
          width: 100,
          customRender: (text) => {
            if (text == 0) {
              return '常规'
            }
            if (text == 1) {
              return '非常规'
            }
            if (text == 2) {
              return '通用'
            }
          }
        },
        {
          title: '状态',
          dataIndex: 'status',
          width: 100,
          isCustomRender: true,
          customRender: (text, record) => {
            return {
              children: this.$createElement('div', {}, [
                this.$createElement('a-switch', {
                  attrs: { checked: Boolean(record.status), size: 'small' },
                  on: {
                    change: (val) => {
                      this.onStatusChange(val, record)
                    }
                  }
                })
              ])
            }
          }
        },
        {
          title: '操作',
          dataIndex: 'handler',
          width: 120,
          isCustomRender: true,
          customRender: (text, record) => {
            return {
              children: this.$createElement('div', {}, [
                this.$createElement(
                  'a-popconfirm',
                  {
                    attrs: { title: '你确定要删除吗？' },
                    on: { confirm: this.del.bind(this, record) }
                  },
                  [
                    this.$createElement('a-button', {
                      domProps: { innerHTML: '删除' },
                      attrs: { type: 'link' },
                      style: { padding: '0 5px 0 0' }
                    })
                  ]
                ),
                this.$createElement('a-button', {
                  domProps: { innerHTML: '修改' },
                  attrs: { type: 'link' },
                  on: { click: this.edit.bind(this, record) },
                  style: { padding: '0 0 0 5px' }
                })
              ])
            }
          }
        }
      ],
      // 数据源
      sourceData: [
        {
          id: 85,
          addrName: '916料场',
          materialName: '卡粉-new',
          materialProducingArea: '京环-new',
          samplingType: 0,
          status: 1,
          timeNames: ['2点半'],
          usingDeptNames: ['BBQ煤炉', '总调度室', '球团3期', '竖炉']
        },
        {
          id: 80,
          addrName: '一号料场',
          materialName: '测试物料',
          materialProducingArea: '测试场地',
          samplingType: 2,
          status: 1,
          timeNames: ['12点'],
          usingDeptNames: ['总调度室', '112烧结厂']
        },
        {
          id: 79,
          addrName: '一号料场',
          materialName: '喷煤',
          materialProducingArea: '二期喷煤厂',
          samplingType: 0,
          status: 1,
          timeNames: ['20点', '08点'],
          usingDeptNames: ['总调度室', '112烧结厂']
        }
      ]
    }
  },
  // 方法
  methods: {
    // 复选框选中的项
    onSelectChange (val) {
      console.log(7878, val)
      this.selectedRowKeys = val
    },
    // switch 改变状态
    onStatusChange (value, record) {
      console.log(value, record)
    },
    // 获取当前选择页数
    handleTableChange (val) {
      console.log(1212, val)
    },
    /**
     * 表格外操作
     */
    // 新增
    creat () {
      console.log('新增操作')
    },
    // 重新处理操作
    anew () {
      console.log('重新处理操作')
    },
    // 作废操作
    toVoids () {
      console.log('作废操作')
    },
    /**
     * 表格内操作
     */
    // 删除
    del (row) {
      console.log('删除操作', row)
    },
    // 编辑
    edit (row) {
      console.log('编辑操作', row)
    }
  }
}
</script>
显示代码

# 手动调整表格列宽

原车牌号码
原车牌颜色
原司机
原联系电话
更换后车牌号
更换后车牌颜色
更换后司机
更换后联系电话
物流公司
采购合同
运单
更换时间
更换区段
操作人员

No Data

配置tableOpt属性，bordered:true，可手动调整表格列宽

<template>
  <p-layout-page>
    <p-layout-page-item>
      <p-ant-layout-table
        :columns="columns"
        column-setting
        name="colWidth"
        :dataSource="sourceData"
        :tableOpt="{scroll: {x: '120%'},bordered:true}"
      />
    </p-layout-page-item>
  </p-layout-page>
</template>
<script>
import dataCol from './data.json'
export default {
  name: 'colWidth',
  data () {
    return {
      // 数据源
      sourceData: [],
      columns: [
        {
          title: '原车牌号码',
          dataIndex: 'originalPlateNum',
          width: 140,
          minWidth: '120px'
        },
        {
          title: '原车牌颜色',
          dataIndex: 'originalPlateColor',
          width: 100,
          minWidth: '100px',
          customRender: (text) => {
            return text === 0 ? "黄牌" : "蓝牌";
          },
        },
        {
          title: '原司机',
          dataIndex: 'originalDriverName',
          width: 120,
          minWidth: '120px'
        },
        {
          title: '原联系电话',
          dataIndex: 'originalTelephone',
          width: 130,
          minWidth: '130px'
        },
        {
          title: '更换后车牌号',
          dataIndex: 'plateNum',
          width: 120,
          minWidth: '120px'
        },
        {
          title: '更换后车牌颜色',
          dataIndex: 'plateColor',
          width: 140,
          minWidth: '140px',
          customRender: (text) => {
            return text === 0 ? "黄牌" : "蓝牌";
          },
        },
        {
          title: '更换后司机',
          dataIndex: 'driverName',
          width: 120,
          minWidth: '120px'
        },
        {
          title: '更换后联系电话',
          dataIndex: 'telephone',
          width: 140,
          minWidth: '140px'
        },
        {
          title: '物流公司',
          dataIndex: 'logisticsName',
          width: 120,
          minWidth: '120px'
        },
        {
          title: '采购合同',
          dataIndex: 'contractCode',
          width: 200,
          minWidth: '200px'
        },
        {
          title: '运单',
          dataIndex: 'waybillCode',
          width: 180,
          minWidth: '180px'
        },
        {
          title: '更换时间',
          dataIndex: 'createTime',
          width: 120,
          minWidth: '120px'
        },
        {
          title: '更换区段',
          dataIndex: 'section',
          width: 120,
          minWidth: '120px'
        },
        {
          title: '操作人员',
          dataIndex: 'creatorName',
          width: 120,
          minWidth: '120px'
        }
      ]
    }
  },
  mounted () {
    this.sourceData = dataCol.data.rows
  }
}
</script>
显示代码

# 手动显示/隐藏或拖动排序列

列设置

原车牌号码
原车牌颜色
原司机
原联系电话
更换后车牌号
更换后车牌颜色
更换后司机
更换后联系电话
物流公司
采购合同
运单
更换时间
更换区段
操作人员

No Data

配置column-setting属性，column-setting:true，可显示列设置按钮 table新增name属性（唯一值）区分不同表格显示隐藏的数据

<template>
  <p-layout-page>
    <!-- <p-layout-page-item> -->
    <p-ant-layout-table
      title="列设置"
      :columns="columns"
      column-setting
      name="colWidth"
      :dataSource="sourceData"
      :tableOpt="{scroll: {x: '120%'},bordered:true}"
    />
    <!-- </t-layout-page-item> -->
  </p-layout-page>
</template>
<script>
import dataCol from './data.json'
export default {
  name: 'columnSet',
  data () {
    return {
      // 数据源
      sourceData: [],
      columns: [
        {
          title: '原车牌号码',
          dataIndex: 'originalPlateNum',
          width: 140,
          minWidth: '120px'
        },
        {
          title: '原车牌颜色',
          dataIndex: 'originalPlateColor',
          width: 100,
          minWidth: '100px',
          customRender: (text) => {
            return text === 0 ? "黄牌" : "蓝牌";
          },
        },
        {
          title: '原司机',
          dataIndex: 'originalDriverName',
          width: 120,
          minWidth: '120px'
        },
        {
          title: '原联系电话',
          dataIndex: 'originalTelephone',
          width: 130,
          minWidth: '130px'
        },
        {
          title: '更换后车牌号',
          dataIndex: 'plateNum',
          width: 120,
          minWidth: '120px'
        },
        {
          title: '更换后车牌颜色',
          dataIndex: 'plateColor',
          width: 140,
          minWidth: '140px',
          customRender: (text) => {
            return text === 0 ? "黄牌" : "蓝牌";
          },
        },
        {
          title: '更换后司机',
          dataIndex: 'driverName',
          width: 120,
          minWidth: '120px'
        },
        {
          title: '更换后联系电话',
          dataIndex: 'telephone',
          width: 140,
          minWidth: '140px'
        },
        {
          title: '物流公司',
          dataIndex: 'logisticsName',
          width: 120,
          minWidth: '120px'
        },
        {
          title: '采购合同',
          dataIndex: 'contractCode',
          width: 200,
          minWidth: '200px'
        },
        {
          title: '运单',
          dataIndex: 'waybillCode',
          width: 180,
          minWidth: '180px'
        },
        {
          title: '更换时间',
          dataIndex: 'createTime',
          width: 120,
          minWidth: '120px'
        },
        {
          title: '更换区段',
          dataIndex: 'section',
          width: 120,
          minWidth: '120px'
        },
        {
          title: '操作人员',
          dataIndex: 'creatorName',
          width: 120,
          minWidth: '120px'
        }
      ]
    }
  },
  mounted () {
    this.sourceData = dataCol.data.rows
  }
}
</script>
显示代码

# Table 组件某列插槽显示

物料名称
取料地
产地
取样时间点
接收机构
类型
状态
年龄：
19
姓名：
张三
学科：
数学
性别：
男
分数：
90
京环-new2点半BBQ煤炉总调度室球团3期竖炉01
年龄：
19
姓名：
张三2
学科：
语文
性别：
男
分数：
99
测试场地12点总调度室112烧结厂21
年龄：
19
姓名：
张三3
学科：
英语
性别：
男
分数：
90
二期喷煤厂20点08点总调度室112烧结厂01

配置columns中scopedSlots属性 例如scopedSlots：{customRender：'插槽名'}并是作用域插槽

<template>
  <p-layout-page>
    <p-layout-page-item>
      <p-ant-layout-table
        isCustomScroll
        :columns="columns"
        :dataSource="sourceData"
        :tableOpt="{bordered:true,scroll: {x: '110%'}}"
      >
        <template #materialName="{text}">
          <a-button>{{text}}</a-button>
        </template>
      </p-ant-layout-table>
    </p-layout-page-item>
  </p-layout-page>
</template>
<script>
export default {
  name: 'columnSlot',
  data () {
    return {
      // 表头
      columns: [
        {
          title: '物料名称',
          width: 100,
          dataIndex: 'materialName',
          scopedSlots: { customRender: 'materialName' }
        },
        {
          title: '取料地',
          width: 180,
          minWidth: 180,
          dataIndex: 'addrName',
          key: "addrName",
          customRender: (text) => {
            const fixInfo = {
              age: '年龄：',
              name: '姓名：',
              course: '学科：',
              sex: '性别：',
              grade: '分数：'
            }
            const flex = {
              display: 'flex'
            }
            return (
              <div>{
                text && Object.keys(fixInfo).map(item => {
                  return (
                    <div style={flex}>
                      <div style="color:#8C8C8C;">{fixInfo[item]}</div>
                      <div style="color:#000;">{text[item] === undefined ? '' : text[item]}</div>
                    </div>
                  )
                })
              }
              </div>
            )
          }
        },
        {
          title: '产地',
          width: 100,
          dataIndex: 'materialProducingArea'
        },
        {
          title: '取样时间点',
          width: 100,
          dataIndex: 'timeNames'
        },
        {
          title: '接收机构',
          width: 280,
          dataIndex: 'usingDeptNames'
        },
        {
          title: '类型',
          width: 100,
          dataIndex: 'samplingType'
        },
        {
          title: '状态',
          width: 100,
          dataIndex: 'status'
        }
      ],
      // 数据源
      sourceData: [
        {
          id: 85,
          addrName: {
            age: 19,
            name: '张三',
            sex: '男',
            course: '数学',
            grade: 90
          },
          materialName: '卡粉-new',
          materialProducingArea: '京环-new',
          samplingType: 0,
          status: 1,
          timeNames: ['2点半'],
          usingDeptNames: ['BBQ煤炉', '总调度室', '球团3期', '竖炉']
        },
        {
          id: 80,
          addrName: {
            sex: '男',
            age: 19,
            name: '张三2',
            course: '语文',
            grade: 99
          },
          materialName: '测试物料',
          materialProducingArea: '测试场地',
          samplingType: 2,
          status: 1,
          timeNames: ['12点'],
          usingDeptNames: ['总调度室', '112烧结厂']
        },
        {
          id: 79,
          addrName: {
            age: 19,
            name: '张三3',
            sex: '男',
            course: '英语',
            grade: 90
          },
          materialName: '喷煤',
          materialProducingArea: '二期喷煤厂',
          samplingType: 0,
          status: 1,
          timeNames: ['20点', '08点'],
          usingDeptNames: ['总调度室', '112烧结厂']
        }
      ]
    }
  },
  // 方法
  methods: {
    // switch 改变状态
    onStatusChange (value, record) {
      console.log(value, record)
    }
  }
}
</script>
显示代码

# 参数配置

# PAntLayoutTable 默认 table 布局组件

代码示例：

  <p-layout-page> // 页面容器
    <p-layout-page-item> // 页面视图功能块容器
      <p-ant-layout-table
        title="样品列表"  // 列表title（在表格左侧）
        columnSetting // 显示设置（隐藏/显示列）
        name="columnSetting" // 隐藏/显示列唯一性
        :pagination="pageOpt" // 分页器
        @paginationChange="handleTableChange" // 获取当前选择页
        @showSizeChange="showSizeChange" // 每页显示总条数时触发
        :columns="columns"  // 表头
        :dataSource="sourceData" // 数据源
        :tableOpt="{rowSelection: {selectedRowKeys: selectedRowKeys, onChange: onSelectChange}}" // 添加Antd table属性
      >
        <!-- 表格外操作————在表格右侧 -->
        <template #btn>
          <a-button type="primary" icon="plus" @click="creat">新增</a-button>
          <a-button type="primary" @click="anew" :disabled="selectedRowKeys.length === 0 ">重新处理</a-button>
          <a-button type="primary" @click="toVoids" :disabled="selectedRowKeys.length === 0 ">作废</a-button>
        </template>
      </p-ant-layout-table>
    </-layout-page-item>
  </p-layout-page>

# 配置参数（Attributes）

参数 说明 类型 默认值
title 左上侧标题 string,slot 无
btn 右上侧按钮组插槽 slot 无
columns table 列描述，详细见下方配置说明。 array 无
dataSource table 数据源 array 无
tableOpt antd table 配置 {} 无
pagination 分页器配置{current: number, pageSize: number, total: number,paginationOpt:{antd pagination 配置}} object 无
table 报表内容插槽，当使用该插槽时，默认 table 将不渲染 slot 无
columnSetting 是否显示设置（隐藏/显示列） Boolean false
name 组件唯一标记，类似 Key 值，用于缓存表头数据 String 无

# columns 配置参数（columns Attributes）

参数 说明 类型 默认值
title 列头显示文字 string 无
dataIndex 列数据在数据项中对应的 key string 无
width 列宽度 number 无
scopedSlots 某列插槽显示 {customRender：'自定义插槽'} 当前 dataIndex 值
customRender 自定义渲染 {comps: comp[]} 无

# comp 配置参数（customRender Attributes）

参数 说明 类型 默认值
isShow 组件渲染条件，返回 true 渲染，反之不渲染 (scope) => {return true} 无
comp 组件名称，可直接指定 element 或其他全局注册的组件如：'el-input'，也可引入非全局组件后直接指向如：Button string ,component 无
text 渲染时组件设置组件文本 string 无
bind 渲染时组件会调用 v-text 指定设置该配置更新元素的属性 object 无
event 设置组件监听的事件，渲染时组件会调用 v-event 指定设置该配置更新元素的事件 (scope) => ({[propName: eventName]: () => {}}) 无
slot 指定插入的插槽 string 无
child 支持子组件配置，参数与上方一致 array 无

# pagination 配置参数（pagination Attributes）

参数 说明 类型 默认值
current 分页器当前页 number 1
total 数据量总数，用于计算分页器总页数 number 0
pageSize 每一页的数据量 number 10
paginationOpt antd pagination 属性配置 object 无

# 事件（events）

事件名 说明 回调参数
paginationChange 分页器页码发生变化时触发 Function(current: number)
showSizeChange 分页器选择每页显示总条数时触发 Function(current: number,pageSize:number)

← ant 配置化表单组件 →