今天開發(fā)當(dāng)中使用到的知識(shí)點(diǎn)。在將后端的列表數(shù)據(jù)，顯示到前端的表格中時(shí)，如果要自定義一些顯示網(wǎng)格，應(yīng)該如何傳參數(shù)和自定義渲染呢？

一，columns的定義

const columns = [
  {
    title: '發(fā)布單編號(hào)',
    dataIndex: 'name'
  },
  {
    title: '項(xiàng)目',
    dataIndex: 'project_name'
  },
  {
    title: '組件',
    dataIndex: 'app_name'
  },
  {
    title: '用戶',
    dataIndex: 'create_user_name'
  },
  {
    title: '更新時(shí)間',
    dataIndex: 'update_date',
    sorter: true,
    customRender: (date) =>{ return moment(date).format("YYYY-MM-DD hh:mm")}
  },
  {
    title: '環(huán)境',
    dataIndex: 'env_name'
  },
  {
    title: '狀態(tài)',
    dataIndex: 'deploy_status_name',
    scopedSlots: { customRender: 'deploy_status_name' }
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' }
  }
]

• 可以看到，更新時(shí)間,狀態(tài),操作都使用了自定義渲染。可以直接寫在column中，可以傳參數(shù)到slot中。

二，table中的template定義

<bf-table
        :columns="columns"
        :dataSource="dataSource"
        rowKey="name"
        @change="onChange"
        :pagination="{
          current: params.currentPage,
          pageSize: params.pageSize,
          total: total,
          showSizeChanger: true,
          showLessItems: true,
          showQuickJumper: true,
          showTotal: (total, range) => `第 ${range[0]}-${range[1]} 條，總計(jì) ${total} 條`
        }"
      >
        <template slot="deploy_status_name" slot-scope="{text,record}">
          <a-tooltip>
            <template slot="title">
                {{record.description}}
            </template>
            <a-tag color='blue' v-if="text==='Ready'">準(zhǔn)備就緒</a-tag>
            <a-tag color='green' v-if="text==='Success'">部署完成</a-tag>
            <a-tag color='orange' v-if="text==='Ongoing'">部署中...</a-tag>
            <a-tag color='red' v-if="text==='Failed'">部署異常</a-tag>
          </a-tooltip>
        </template>
        <div slot="action" slot-scope="{text, record}">
          <a-button type="primary" @click="goDeploy(record)">部署</a-button>
        </div>
      </bf-table>

• 模板中對(duì)應(yīng)的slot-scope可以用來傳遞參數(shù)，其中第一個(gè)參數(shù)是當(dāng)前字段對(duì)應(yīng)的值progress，第二個(gè)參數(shù)是當(dāng)前字段對(duì)應(yīng)的所有值對(duì)象,即整個(gè)data[n]

三，看看效果

2021-03-01 09_15_17-懸浮球.png

四，參考URL

https://www.zhangshengrong.com/p/QrXebDZL1d/