vue 将三维数组的某个字段取出 形成一个二维数组

假设你有一个三维数组 `arr`，每个元素都是一个对象，你想从其中取出每个元素的某个字段，形成一个二维数组 `newArr`，那么你可以使用 `map` 方法遍历原数组，然后再使用 `map` 方法遍历每个元素的子数组，最后将所需字段取出并放入新数组中。

代码示例：

const arr = [
  [
    { id: 1, name: 'A' },
    { id: 2, name: 'B' },
    { id: 3, name: 'C' }
  ],
  [
    { id: 4, name: 'D' },
    { id: 5, name: 'E' },
    { id: 6, name: 'F' }
  ]
];
const field = 'name';
const newArr = arr.map(subArr => subArr.map(item => item[field]));
console.log(newArr); // 输出 [['A', 'B', 'C'], ['D', 'E', 'F']]

上述代码中，外层的 `map` 方法遍历原数组中的每个子数组，内层的 `map` 方法遍历子数组中的每个元素，最终将元素的 `name` 属性取出并放入新数组中。需要注意的是，内层的 `map` 方法返回的是一个新数组，该数组中只包含所需字段的值。

相关问题

纯VUE实现自定义字段导出EXCEL

A：

实现自定义字段导出EXCEL可以分为以下几个步骤：

1.构建表格数据：首先需要从后台获取表格数据，将其构建成一个二维数组，同时需要定义表头等相关参数。

2.创建表格对象：使用第三方库（如xlsx）创建表格对象，设置表格标题等相关参数。

3.填充表格数据：循环将表格数据中的每个元素写入表格中。可以根据需要导出的字段，只填充特定的列。

4.导出表格文件：使用FileSaver.js等库将表格文件保存到本地。

下面是一个纯VUE实现自定义字段导出EXCEL的示例代码：

<template>
<div>
<button @click="exportExcel">导出Excel</button>
</div>
</template>

<script>
import { utils, writeFile } from 'xlsx';

export default {
data() {
return {
tableData: [
['姓名', '年龄', '性别', '城市'],
['张三', 18, '男', '北京'],
['李四', 20, '女', '上海'],
],
};
},
methods: {
exportExcel() {
const headers = ['姓名', '性别']; // 自定义导出的字段
const data = this.tableData.map(item => {
return headers.map(key => item[key]);
});
data.unshift(headers); // 表头数据

const ws = utils.aoa_to_sheet(data);
const wb = utils.book_new();
utils.book_append_sheet(wb, ws, 'Sheet1');
const fileName = '表格数据.xlsx';
writeFile(wb, fileName);
},
},
};
</script>

上面的示例代码使用了xlsx库来创建和填充表格数据。需要注意的是，该库默认只支持浏览器环境。如果需要在Node.js环境中使用，可以考虑使用node-xlsx库。

用vue2写一个表格轮播

首先，我们需要安装vue-awesome-swiper插件，可以使用以下命令安装：

npm install vue-awesome-swiper --save

然后在你的Vue组件中引入和使用它。假设你的表格数据是一个数组 `tableData`，每个数据行有三个字段：`id`、`name`和`age`。

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="item in slideData" :key="item.id">
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>Name</th>
              <th>Age</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{{ item.id }}</td>
              <td>{{ item.name }}</td>
              <td>{{ item.age }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import 'swiper/css/swiper.css'
import Swiper from 'vue-awesome-swiper'

export default {
  name: 'TableSlider',
  components: {
    Swiper,
  },
  data() {
    return {
      tableData: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 },
        { id: 3, name: 'Charlie', age: 35 },
        { id: 4, name: 'David', age: 40 },
      ],
    }
  },
  computed: {
    slideData() {
      const slideCount = Math.ceil(this.tableData.length / 3)
      const slideData = []
      for (let i = 0; i < slideCount; i++) {
        const start = i * 3
        const end = start + 3
        slideData.push(this.tableData.slice(start, end))
      }
      return slideData
    },
  },
  mounted() {
    new Swiper('.swiper-container', {
      pagination: '.swiper-pagination',
      paginationClickable: true,
      spaceBetween: 30,
      loop: true,
      autoplay: {
        delay: 3000,
      },
    })
  },
}
</script>

在上面的代码中，我们使用Swiper组件来实现轮播功能。Swiper组件需要一个包裹元素（`div.swiper-container`）和一些轮播内容元素（`div.swiper-slide`）。我们使用`v-for`指令来循环渲染表格数据，每三个数据行渲染为一个轮播内容元素。

在`computed`选项中，我们使用`slice`方法来分割表格数据，每三个数据行为一组，最终得到一个二维数组`slideData`，其中每个元素都是一个包含三个数据行的数组。

在`mounted`生命周期钩子中，我们创建一个Swiper实例，并传入一些配置选项，例如分页器、轮播间距、循环播放和自动播放等。

最后，我们需要在组件的样式中添加一些CSS规则来美化Swiper组件。例如，我们可以添加以下CSS规则来控制表格的样式：

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

这样就完成了一个简单的表格轮播组件。