前端 js this.dataSource = res.data.data.items || []；

最新推荐文章于 2023-07-09 00:10:10 发布
最新推荐文章于 2023-07-09 00:10:10 发布
阅读量1.3k 收藏 2
点赞数 2
CC 4.0 BY-SA版权
分类专栏： 前端 Javascript 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wujian_csdn_csdn/article/details/120972612
本文介绍了一种前端处理后端API返回数据中可能存在的null值的方法，通过使用条件运算符来避免逻辑错误。当`res.data.data.items`为null时，用空数组`[]`替代，确保数据源`this.dataSource`始终有一个安全的初始值。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前端有时候获取后端返回值res的数据，但是不知道这个数据是否有值，这个时候一般处理是这样：
this.dataSource = res.data.data.items || [];
防止后端出现null值导致逻辑错误

意思是 res.data.data.items如果是null的话 就取[]，
如果不是null 就取自身的值

MyBatis源代码--数据源（dataSource）
初学者
06-30 1624
dataSource 元素使用标准的 JDBC 数据源接口来配置 JDBC 连接对象的资源。 许多 MyBatis 的应用程序将会按示例中的例子来配置数据源。然而它并不是必须的。要知道为了方便使用延迟加载，数据源才是必须的。 有三种内建的数据源类型（也就是 type=”[UNPOOLED|POOLED|JNDI]”）： UNPOOLED– 这个数据源的实现只是每次被请求时打开和关闭连接。虽然一
ModBus-RTU通信测试平台
zmq512819343的博客
04-25 289
1.界面初始化 private void FrmModbusRtu_Load(object sender, EventArgs e) { this.lst_Info.Columns[1].Width = this.lst_Info.ClientSize.Width - this.lst_Info.Columns[0].Width; //串口名 string[] PortNam
前端开源库-apollo-datasource
08-30
前端开源库-apollo-datasourceApollo数据源，空
前端框架之：kendoui笔记之 grid及dataSource 数据源
liyaodong1234的博客
02-26 2668
kindoui grid 初始化及属性说明 顺序可以不一样但尽量不要错 $("#dg").kendoGrid({ allowCopy：boolean ,//是否启用表格复制 columnResizeHandleWidth:Number, //设置列可调整的宽度大小 filterable:Boolean,//是否在表头启用筛选功能 dataSource:数据源,//grid数据源 columns:[{ field：String,//列对应的数据源中的字段名 title：String, //列名 width
js处理DataSet数据源
wfdoublext的专栏
05-07 465
[Ajax.AjaxMethod()] public DataSet GetDataSet() { OleDbConnection conn = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=D:工作项目分析 estdb.mdb;Persist Secur...
用JavaScript操作数据库
志龙的专栏
01-25 1228
   //用 JavaScript 写服务器端连接数据库的代码示例  var conn = new ActiveXObject("ADODB.Connection");  conn.Open("Provider=SQLOLEDB.1; Data Source=localhost; User ID=sa; "    +"Password=password; Initial Catalog=mei
// 数据 const getTotalBeforeData = function () { axiosPost("/user/total/SearchByDateAndName", param, t).then((res) => { // 表头名 const s1 = res.data.data.tableName.map((header: any, index: any) => ({ title: header, dataIndex: header, key: header, fixed: index < 4 ? "left" : undefined, // 固定前6列 width: index === 0 ? 50 : index === 2 ? 200 : 90, onHeaderCell: () => ({ style: { backgroundColor: '#769fcd' } }) }) ) s1[0].title = "no" s1[3].title = "実績工数" setColumns(s1) // 表内容 for (let index = 0; index < res.data.data.tableData.length; index++) { res.data.data.tableData[index].id = index + 1 } setDataSource(res.data.data.tableData) // 合计 const length = s1.length let s2: any = [] var totalKeys = Object.keys(res.data.data.statistics) var totalValues = Object.values(res.data.data.statistics) for (let index = 3; index < s1.length; index++) { for (let i = 0; i < totalKeys.length; i++) { const totalKey = totalKeys[i]; const totalValue = totalValues[i]; if (totalKey == s1[index].key) { s2.push(totalValue); } } } setItems(s2) }); }<Spin spinning={loading} > <Table<DataType> columns={columns} dataSource={dataSource} rowClassName={(record, index) => (index % 2 === 1 ? "even" : "odd")} scroll={{ x: "max-content", y: "calc(100vh - 350px)" }} // 设置表格滚动高度 pagination={false} bordered summary={() => ( <Table.Summary fixed> <Table.Summary.Row> <Table.Summary.Cell index={0} colSpan={3}> 合计 </Table.Summary.Cell> {items.map((item, index) => ( <Table.Summary.Cell index={index + 3}>{item} </Table.Summary.Cell> ))} </Table.Summary.Row> </Table.Summary> )} /> </Spin>我想将第五列小于0的单元格变成红色
最新发布
04-04
res.data.data.tableData[index].id = index + 1; } setDataSource(res.data.data.tableData); // 合计逻辑也无需改动... setItems(s2); }); }; <Spin spinning={loading}> columns={columns} ...
const getTotalBeforeData = function () { axiosPost(“/user/total/SearchByDateAndName”, param, t).then((res) => { // 表头名 const s1 = res.data.data.tableName.map((header: any, index: any) => ({ title: header, dataIndex: header, key: header, fixed: index < 4 ? “left” : undefined, // 固定前6列 minWidth: index === 0 ? 50 : index === 2 ? 200 : 90, // 设置列宽 maxWidth: index === 0 ? 50 : index === 2 ? 200 : 90, onHeaderCell: () => ({ style: { backgroundColor: '#769fcd' } }) }) ) s1[0].title = "no" s1[3].title = "计划工时" s1[4].title = "实际工时" s1[5].title = "差异" setColumns(s1) // 表内容 for (let index = 0; index < res.data.data.tableData.length; index++) { res.data.data.tableData[index].id = index + 1 } setDataSource(res.data.data.tableData) // 合计 const length = s1.length let s2: any = [] var totalKeys = Object.keys(res.data.data.statistics) var totalValues = Object.values(res.data.data.statistics) for (let index = 3; index < s1.length; index++) { for (let i = 0; i < totalKeys.length; i++) { const totalKey = totalKeys[i]; const totalValue = totalValues[i]; if (totalKey == s1[index].key) { s2.push(totalValue); } } } setItems(s2) }); }<Spin spinning={loading} > <Table<DataType> columns={columns} dataSource={dataSource} rowClassName={(record, index) => (index % 2 === 1 ? “even” : “odd”)} scroll={{ x: “max-content”, y: “calc(100vh - 350px)” }} // 设置表格滚动高度 pagination={false} bordered summary={() => ( <Table.Summary fixed> <Table.Summary.Row> <Table.Summary.Cell index={0} colSpan={3}> 合计 </Table.Summary.Cell> {items.map((item, index) => ( <Table.Summary.Cell index={index + 3}>{item} </Table.Summary.Cell> ))} </Table.Summary.Row> </Table.Summary> )} /> </Spin>虽然固定了列宽，但是我可以做列筛选，当宽度之和小的时候就会按百分比变宽，怎么解决
04-04
dataSource={dataSource} scroll={{ x: true, y: 'calc(100vh - 350px)' }} pagination={false} bordered /> ``` 此外，你可以结合 CSS 样式锁定每列表格单元格的实际宽度，防止其被浏览器或框架动态拉伸。 ``...
vue分页功能
qq_42981715的博客
03-03 2422
分页分页、查询、重置、修改、删除 分页、查询、重置、修改、删除 vue中的分页使用频繁，在此记录一下。因为分页一般和增删查改等一起使用，所以写了一套。若是没有使用到其他功能，可以直接删除，只使用分页功能。 pagination: { total: 0, current: 1, pageSize: 10, //每页中显示10条数据 pageSizeOptions: ["10", "20", "30"], // 每页中显示的数据
沙雕前端,const { data : res } = await login(this.ruleForm)
Leacode的博客
05-25 2627
1 res?.data?.result 可选链 2 ??默认值和||默认值的区别
a44185的博客
05-14 680
文章目录Optional Chaining?.？？ Optional Chaining Optional Chaining 可选链。目前还在草案stage阶段 Optional Chaining 可选链 【?.和??】不支持ie浏览器 ?. ?.可以防止null和undefined报错 var obj = { // son1: null, // son1: undefined, // son1: {pwd:'张三'}, // son2: {pwd:'
JS向数组添加元素、插入数据
qq_38361229的博客
03-19 899
JS向数组添加元素
DataSource接口和一些扩展
北堂飘霜_记录
09-11 715
上次说到了Manager，这次来说一下获得链接的第二种方式。**javax.sql.DaraSource**以及JNDI API和连接的关闭。
Vue表格自定义单元格模板,新增行
qq_34004756的博客
05-08 895
实现如下效果 <template> <a-modal title="修改接口定义信息" :width="1200" :visible="visible" :confirmLoading="confirmLoading" @ok="handleSubmit" @cancel="handleCancel" > <a-spin :spinning="formLoading"> <a-for
动态表头数据处理
2301_77519113的博客
07-09 127
el-button type="primary" @click="getShop(scope.row.id)">详情</el-button>// this.$router的 query 传值 可读性强。-- align 数据居中处理 表头数据处理-->-- this.$router传值 -->-- 作用域插槽 列处理 图片处理-->// 表头数据，如下方格式 数据覆盖掉即可。-- :data 自带属性 绑定的数据源 -->title: "姓名",//商品详情组件 跳转传值。
js 数组方法使用
凡尘
05-31 137
判断字符串中是否包含，用indexOf，不包含则返回-1。数据返回的是数组，如何展示成文字。
2021-8-2 前端开发中每天遇到的问题（3）---vue中的数组解构赋值，改变堆地址
negel_xu的博客
08-02 519
const newArr = [...this.dataSource] newArr.forEach((item, index) => { // console.log(item) const obj = {} let producedAmount = '' let consumedAmount = '' let timestr = '' let flag = 0 o...
获取表数据--前后端接口对接-vue
weixin_43312391的博客
02-15 3111
后端swagger： template中： <div class="approvalForm"> <el-table :data="tableData" style="width: 100%" :header-cell-style="{ background: '#F7F7F7', textAlign: 'center' }" :cell-style="{ textAlign: 'ce
【独家】（AntDesign）Vue更改了datasourse里的数据，但数组没有被渲染，（更改数组后页面不刷新）
wwppp987的博客
07-07 5429
很多新手面对Vue中设置this.DataSource[index] = {key:'1',V1:'值'};无效 首先，需要声明一点，vue当中的数组是不允许直接设定的，设定完的数组不会被渲染监听，只能重新渲染。所以，后台console数组是变化的。 具体涉及到js基本原理和vue原理： Vue设定了专门的函数进行渲染： splice(起始下标,删掉几个,替换内容) 使用格式： database.splice(1,1,"{key:1,V1:'值'}","{key:2,V1:'值2'}"); 从第2
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值