Ant Design of Vue表格中slot-scope=“text, record”

1、需求：单元格中的内容需要循环渲染，如图2、后台返回的数据格式为：3、刚开始使用的是这样：<template slot="conditionsArr" slot-scope="text, record"><ul class="conditonBox"><li v-for="(item, index) in record.conditionsArr" :key="in

心若向阳(*￣︶￣)

14168人浏览 · 2021-05-12 09:14:51

心若向阳(*￣︶￣) · 2021-05-12 09:14:51 发布

1、需求：单元格中的内容需要循环渲染，如图

在这里插入图片描述

2、后台返回的数据格式为：

在这里插入图片描述

3、刚开始使用的是这样：

<template slot="conditionsArr" slot-scope="text, record">
<ul class="conditonBox">
    <li v-for="(item, index) in record.conditionsArr" :key="index">
      <div class="listBox">
        <span class="listId">{{ index + 1 }}</span>
        <span class="listContent">{{ item.prop1 }}</span>
        <span class="listContent">{{ item.exp }}</span>
        <span class="listContent">{{ item.val }}</span>
        <span class="listContent" style="margin-left: 0px">{{
          item.unit
        }}</span>
        <span class="listContent">{{
          item.prop2
        }}</span>
        <span class="listContent">{{ item.prop3 }}</span>
      </div>
    </li>
  </ul>
</template>

4、返回表格：

在这里插入图片描述

5、然后只能一层一层去拿数据了

<template slot="conditionsArr" slot-scope="text, record">
  <span>{{ record }}</span>
</template>

6、表格渲染出来的是空的

在这里插入图片描述

7、换个数据

<template slot="conditionsArr" slot-scope="text, record">
 <span>{{ text }}</span>
</template>

8、有数据了

在这里插入图片描述
放到json工具

9、问题解决：

<template slot="conditionsArr" slot-scope="text">
 <ul class="conditonBox">
    <li v-for="(item, index) in text.record.conditionsArr" :key="index">
      <div class="listBox">
        <span class="listId">{{ index + 1 }}</span>
        <span class="listContent">{{ item.prop1 }}</span>
        <span class="listContent">{{ item.exp }}</span>
        <span class="listContent">{{ item.val }}</span>
        <span class="listContent" style="margin-left: 0px">{{
          item.unit
        }}</span>
        <span class="listContent">{{
          item.prop2
        }}</span>
        <span class="listContent">{{ item.prop3 }}</span>
      </div>
    </li>
  </ul>
</template>

10、效果：

在这里插入图片描述

11、可能是后台返回的格式不同，或者是我们的习惯不同，但是只要先一步一步拿到数据，终究结果都是一样的。

12、追加：如果对单元格的数据无操作直接渲染，则定义dataIndex; 如果单元格的数据都是一个一个去拿到，则没必要（自定义siteInfo，页面通过record则拿到当前行的数据）

html
<template slot="siteInfo" slot-scope="record">
  <ul class="infoBox">
    <li>
      <span>测站编码：{{record.devId}}</span>
      <span>测站名称：{{record.name}}</span>
      <span>测站地址：{{record.address}}</span>
    </li>
  </ul>
</template>
js
{
  title: "异常监测数据",
   dataIndex: "outliers",
   align: "center"
 },
 {
    title: "测站信息",
    align: "center",
    scopedSlots: {
      customRender: "siteInfo",
    },
  },

13、如果是直接使用，可以这么写：

{
  title: "季度",
  dataIndex: 'quarter',
  scopedSlots: {
    customRender: "quarter",
  },
},
<span slot="quarter" slot-scope="record">
	<span>{{ record.text? '第' + record.text + '季度': '--'}}</span>
</span>

14、注意dataIndex、scopedSlots同时存在的时候，直接取值需要record.text

15、还有其它情况，就是dataIndex、scopedSlots同时存在，直接拿到值做判断

const columns = [
	{
		title: '季度',
		scopedSlots: { customRender: 'quarter' }
	},
	{
		title: '经办人',
		dataIndex: 'operatorName',
		scopedSlots: { customRender: 'operatorName' }
	}
]

<!-- 拿到当前行对象 -->
<span slot="quarter" slot-scope="row">第{{row.quarter}}季度</span>
<!-- 直接使用 -->
<span slot="operatorName" slot-scope="text">{{text||'--'}}</span>