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="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>

16、总结：看后台返回怎样的数据，然后自己的需求又是如何的，一步一步去取

5.12 汶川13周年少年犹在，祖国安泰！

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

Ant Design of Vue 表格使用 vue-draggable-resizable 封装表头问题汇总
背景项目需要表格支持拉伸每列的宽度,查看了文档,官方建议是用 vue-draggable-resizable 插件结合 components 属性,给表头 header 增加一个可拖拽的功能.其实下 ...
ant design vue 表格中时间戳转换成时间格式显示
ant design vue 表格中时间戳转换成时间格式显示原始数据表格如上图,因为接口传递过来的时间是10位int类型的时间戳格式,所以前端需要我们把时间格式化. step1 安装moment n ...
使用Ant Design 和Vue，React中后台开发套餐
2019独角兽企业重金招聘Python工程师标准>>> 前言目前Ant Design 提供 React 和 Vue 两种整合开发框架,开箱即用的中台前端/设计解决方案,可适合中小公 ...
标题Ant Design of Vue 组件库中Modal“确认“按钮和“取消“按钮成英文状态
标题Ant Design of Vue 组件库中Modal"确认"按钮和"取消"按钮成英文状态因为是国际化的原因,造成确定按钮和取消按钮变成英文,需要设置 o ...
Vue.js高效前端开发 • 【Ant Design of Vue框架进阶】
全部章节 >>>> 文章目录一.栅格组件 1.栅格组件介绍 2.栅格组件使用 3.实践练习二.输入组件 1.输入框组件使用 2.选择器组件使用 3.单选框组件使用 4.实践 ...
Ant Design of Vue +TS 表单动态增加数据验证卧坑姿势
文章目录 Update 20210601 Update 20210525 原文: 1.a-form的model 2.获取数据源码 Update 20210601 今天做别的页面的时候发现又取不到数据 ...
ant design pro vue左侧菜单自定义图标
做ant design pro vue项目的时候突然想修改左侧菜单的图标,在修改途中发现源码中提供的方法方法居然不生效(如下所示) 在src/assets/icons文件夹中下载svg图标在src/ ...
Vue表格中，对数据进行转换、处理
众所周知,后端从Mysql取出的数据,一般是很难单独处理某一个Key的数据的(需要处理的话,可能会浪费大量的性能.而且对页面加载时间有很大的影响),所以,从数据库取出的数据.只能由前端进行处理.但是在 ...
创建Vue+TS+Ant Design of Vue 项目
创建Vue+TS+Ant Design of Vue 项目创建项目选择配置运行项目安装 ant-design-vue 安装 babel-plugin-import 使用VS Code打开配置 ...

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

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

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

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

4、返回表格：

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

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

7、换个数据

8、有数据了

9、问题解决：

10、效果：

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

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

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

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

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

16、总结：看后台返回怎样的数据，然后自己的需求又是如何的，一步一步去取

5.12 汶川13周年少年犹在，祖国安泰！

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

最新文章

热门文章

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

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

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

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

4、返回表格：

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

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

7、换个数据

8、有数据了

9、问题解决：

10、效果：

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

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

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

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

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

16、总结：看后台返回怎样的数据，然后自己的需求又是如何的，一步一步去取

5.12 汶川13周年 少年犹在，祖国安泰！

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

最新文章

热门文章

5.12 汶川13周年少年犹在，祖国安泰！