关于 ant-design-vue a-table 表格的使用

本文所用到的为 v1 版本的ant-design-vue  框架 

操作栏通过 slot-scope 的属性 实现

<a-table bordered :columns="headerArr" :dataSource="tableData" :pagination="pagination" :rowKey="res => res.indexId" :scroll="{ x: 1200 }" class="mb20">
      <template slot="operationBtn" slot-scope="record">
        <a
          @click="detailBtn(record)"
        >
          详情
        </a>
      </template>
     </a-table>

{
  id: "10",
  checked: true,
  title: "操作",
  width: 120,
  fixed: "right",
  scopedSlots: {
      customRender: "operationBtn",
  },
},

返回数据拼接处理 

{
          id: "4",
          checked: true,
          title: "周期(天)",
          dataIndex: "back_cycle",
          width: 140,
          ellipsis: true,
          customRender:(test,record) => {
            return (
              <span>{record.back_cycle}天</span>  
            )
          }
        },

返回字段为数组，进行循环展示

{
            id: "8",
            title: '主体',
            width: 220,
            customRender: (text, record,index) => {
              let that = this;
              const h = this.$createElement;
              let btnArr=[];
              record.names.forEach(item=>{
                btnArr.push(
                  h('p',  {
                      style: {
                          margin: 0,
                      },
                  }, item)
                ) 
              })
              var del =  h('div', null, btnArr)
              return  [del]
            }
        }

tooltip 省略展示字段项 

{
              id: "2",
              checked:true,
              title: '商家名称',
              dataIndex: 'company_name',
              width: 140,
              ellipsis: true,
              customCell  : () => {
                return {
                  style: {
                    width: '100px',
                    overflow: 'hidden',
                    whiteSpace: 'nowrap',
                    textOverflow:'ellipsis',
                    cursor:'pointer'
                  }
                }
              },
              customRender: (text,record) => <a-tooltip placement="topLeft" title = {record.company_name} >{record.company_name}</a-tooltip>
            }

全局过滤器使用

{
          id: "5",
          checked: true,
          title: '金额(元)',
          dataIndex: 'success_amount',
          ellipsis: true,
          customRender: (text,record) => {
            return (
              <div>
                { this.$options.filters.numberToCurrency(record.success_amount) }
              </div>
            )
          }
        }