vue中用map()方法重新创建新数组

 Map方法允许你使用指定的操作将现有数组转换为新数组。

<template>
  <div>
    <el-table
        :data="tableData"
        height="250"
        border
        @selection-change="handleSelectionChange"
        style="width: 100%">
      <el-table-column
          type="selection"
          align="center"
          width="55">
      </el-table-column>
      <el-table-column
          prop="date"
          label="日期"
          align="center"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          align="center"
          width="180">
      </el-table-column>
      <el-table-column
          prop="address"
          align="center"
          label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Vue from 'vue';
import {Table, TableColumn} from 'element-ui';

Vue.use(Table);
Vue.use(TableColumn);

export default {
  name: "test",
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      dateNew: '',
      nameNew: '',
      addressNew: ''

    }
  },
  methods: {
    handleSelectionChange(row) {
      let userNewsDate = {
        userNews: row.map(item => ({
          dateNew:item.date,
          nameNew:item.name,
          addressNew:item.address
        }))
      }
      console.log("userNewsDate:",userNewsDate)
    }
  }
}
</script>
<style scoped>

</style>
 

 

posted @ 2021-04-22 10:36  ssjd  阅读(19047)  评论(0编辑  收藏  举报