zoukankan      html  css  js  c++  java
  • vue中用map()方法重新创建新数组

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

    <template>
      <div>
        <el-table
            :data="tableData"
            height="250"
            border
            @selection-change="handleSelectionChange"
            style=" 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>
     
  • 相关阅读:
    一、异常
    自控力_第三章
    Vocabulary Recitation 2020/05/05
    Vocabulary Recitation 2020/05/04
    Vocabulary Recitaion 2020/05/03
    Vocabulary Recitation 2020/05/01
    最大子序列和
    Vocabulary Recitation 2020/04/29
    自控力_第二章
    Vocabulary Recitation 2020/04/27
  • 原文地址:https://www.cnblogs.com/ssjd/p/14688369.html
Copyright © 2011-2022 走看看