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>
     
  • 相关阅读:
    如何把List 里的数据读出来 赋值给String?
    javascript打印、设置、预览
    SQL通配符
    C# GUID的使用
    Winform 多国语言窗体的设计以及.NET中资源文件的使用
    Winfrom 重新登录
    C# string.Format()
    聚合函数的应用(转)
    C# out和ref关键字
    性能测试工具Gprof
  • 原文地址:https://www.cnblogs.com/ssjd/p/14688369.html
Copyright © 2011-2022 走看看