vue用map找到数组中不为空的哪项数据

你可以使用JavaScript中的`Array.prototype.map()`方法来遍历数组并返回一个新的数组，然后使用`Array.prototype.filter()`方法筛选出不为空的项。

以下是示例代码：

const arr = [null, 'hello', '', undefined, 'world'];

const result = arr.map((item, index) => {
  return item ? index : null;
}).filter(item => item !== null);

console.log(result); // 输出 [1, 4]

在上面的代码中，我们首先定义了一个数组`arr`，它包含了一些空值和非空值。接着，我们使用`map()`方法遍历数组，并返回一个新的数组，其中每个项都是原数组中对应项的索引值（如果该项不为空），或者是`null`（如果该项为空）。最后，我们使用`filter()`方法筛选出不为空的项，即不等于`null`的项，并将它们保存在`result`数组中。

相关问题

vue el-table 行列倒换

### 实现 Vue 中 el-table 行列互换

为了实现在 `Vue` 中使用 `el-table` 组件完成表格的行列互换效果，可以采用两种主要方法。

#### 方法一：通过计算属性重新构建数据结构

这种方法的核心在于改变原始数据数组的形式，使其每一项代表原表的一列而不是一行。具体来说，在组件内部定义一个新的 computed 属性来处理并返回调整后的数据列表[^2]。

computed: {
    transposedData() {
        const originalData = this.tableData;
        let result = [];
        
        if (originalData.length === 0 || !this.columnNames) return [];

        // 初始化新数组的第一行为列名
        result.push(this.columnNames);

        for (let i = 0; i < Math.max(...this.columnNames.map(col => col.prop)); i++) {
            let row = {};
            this.columnNames.forEach((col, index) => {
                row[col.label] = originalData[i]?.[col.prop];
            });
            result.push(row);
        }

        return result.slice(1); // 移除第一行作为实际的数据部分
    }
}

注意上述代码片段中的逻辑可能需要根据实际情况做适当修改以适应不同的需求场景。

#### 方法二：利用第三方库辅助实现

另一种方式是借助一些现有的 JavaScript 库来进行矩阵转置操作，比如 lodash 或者其他类似的工具函数集合。这种方式更加简洁明了，只需要引入相应的包就可以轻松调用其内置的方法完成任务[^3]。

npm install lodash-es

接着可以在项目里这样写：

import _ from 'lodash-es';

// ...

methods: {
    transposeTable(dataArray) {
        return _.zipObject(_.keys(dataArray[0]), _.zip(...dataArray));
    }
},

最后再将经过转换的新对象传递给 `<el-table>` 的 prop 来渲染页面即可。

无论是哪种方案都可以达到预期目的，开发者可以根据个人喜好以及项目的具体情况选择最适合自己的解决方案。