vue循环内输出类型判断

在 js 的data()返回值的内部有customRender这个属性是可以进行判断的,其有两个值,text参数为当前行的值;record参数为当前行数据。

例:

{
  title:'使用状态',
  align:"center",
  dataIndex: 'status',
  customRender: (text, record) => {
    if (text === 2) {
      return '使用'
    } else if (text === 3) {
      return '未使用'
    }
  }
},

截图:

 

### Vue 循环渲染时出现 `Cannot read properties of null (reading 'insertBefore')` 的解决方案 当遇到 `TypeError: Cannot read properties of null (reading ‘insertBefore’)` 错误时,通常是因为尝试操作了一个未定义或为空的对象属性。此问题可能发生在组件挂载阶段或其他生命周期钩子中[^1]。 #### 原因分析 该错误表明在试图调用某个对象的方法或访问其属性之前,这个对象已经被设置为 `null` 或者从未被初始化过。对于 Vue 组件而言,在 DOM 操作前确保目标元素存在至关重要。如果模板中的某些条件判断未能正确处理边界情况,则可能导致此类异常发生[^2]。 #### 解决方案 ##### 1. 确认数据状态 确保用于循环的数据源已经加载完成并有效赋值给响应式变量。可以利用 `v-if` 来控制列表是否应该呈现出来: ```html <div v-if="items && items.length"> <!-- 进行遍历 --> </div> ``` 这样可以在确认有实际内容后再进行后续逻辑运算,从而避免潜在的空指针引用风险[^3]。 ##### 2. 使用安全导航符 (`?.`) 为了防止直接访问到 `null` 对象上的成员而导致崩溃,推荐采用 JavaScript 中的安全导航操作符(`?.`)来代替传统的`.` 访问方式: ```javascript // 不建议的做法, 可能会抛出错误 element.insertBefore(newNode); // 推荐做法, 防止 element 是 null 导致程序中断 element?.insertBefore(newNode); ``` 通过这种方式即使 `element` 为 `null`, 整体表达式的计算也会优雅地中止而不是引发致命性的运行期错误[^4]。 ##### 3. 初始化默认值 针对那些可能会成为 `undefined` 或 `null` 的变量提前设定好合理的初始值,比如数组类型的字段可以直接设为空数组([]),而非留作 `null`. ```javascript data() { return { listItems: [], // 默认为空数组 }; } ``` 这样做不仅有助于减少不必要的检查语句,同时也让代码更加简洁易读. ##### 4. 调试与日志记录 适当增加调试信息可以帮助快速定位具体哪一部分出现了问题。可以通过浏览器开发者工具查看具体的堆栈跟踪(stack trace), 并结合 console.log 输出更多上下文环境下的有用线索. ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值