x-extends / vxe-table

Vxe table 的表格组件
https://vxetable.cn
MIT License
7.61k stars 1.05k forks source link

如果data是[null] 会报错 #2329

Open luger1990 opened 8 months ago

luger1990 commented 8 months ago

可复现的链接:

https://codesandbox.io/p/sandbox/vxe-table-4-x-vue-3-0-wen-ti-yan-shi-forked-xrky7d?file=%2Fsrc%2Fviews%2FDemo1.vue

问题描述与截图:

<template>
  <div>
    <p>Table 演示</p>
    <vxe-table border :data="tableData">
      <vxe-column type="checkbox" width="60"></vxe-column>
      <vxe-column field="name" title="Name"></vxe-column>
      <vxe-column field="sex" title="Sex"></vxe-column>
      <vxe-column field="date" title="Date"></vxe-column>
      <vxe-column field="address" title="Address"></vxe-column>
    </vxe-table>
    <p>Grid 演示</p>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      gridOptions: {
        border: true,
        columns: [
          { type: "seq", width: 60 },
          { field: "name", title: "Name" },
          { field: "sex", title: "Sex" },
          { field: "date", title: "Date" },
          { field: "address", title: "Address" },
        ],
        data: [],
      },
    };
  },
  mounted() {
    var list1 = [null]; // 这种数据会报错
    var list2 = [];
    for (var index = 0; index < 3; index++) {
      list2.push({
        name: "test" + index,
        role: "developer",
        sex: "Man",
        date: "2019-05-01",
        time: 1556677810888 + index * 500,
        region: "ShenZhen",
        address: "address abc" + index,
      });
    }
    this.tableData = list1;
    this.gridOptions.data = list2;
  },
};
</script>

var list1 = [null]; // 这种数据会报错
这种数据会导致渲染失败

期望的结果:

过滤掉null值

操作系统:

windows 11

浏览器版本:

Chrome 120.0.6099.130(正式版本) (64 位)

vue 版本:

3.3.11

vxe-table 版本:

4.5.17

devoteGl commented 4 months ago

这样的异常数据,难道不应该笔者自行处理吗?