Vue操作随笔

                                                Vue操作随笔

1.Vue运用<el-table>进行表数据的动态展示

1.进行一行数据的显示

<template>
  <el-table :data="data_list" border stripe>
    <el-table-column prop="name" label="姓名" width="120"></el-table-column>
    <el-table-column  label="项目"  :key="key" v-for="(date, key)  in data_list[0].project">
      <template slot-scope="scope">
        {{data_list[0].project[key]}}
      </template>
    </el-table-column>
  </el-table>

</template>

<script>
  export default {
    data() {
      return {
          data_list:[{"name":"赵化臣","project": [1, 2, 3, "aaa",5,6,7,8,9,10,11,12,13,45,16]}
          ]
      }
    },
  }
</script>


<style scoped>


</style>

2.进行多行数据的显示

<template>
  <el-table :data="this.tabletail" border stripe>
    <el-table-column  label="姓名" width="120">
      <template slot-scope="scope">
      </template>
    </el-table-column>
    <el-table-column  :label="date"  :key="key" v-for="(date, key)  in this.aaa">
      <template slot-scope="scope">
          <el-button type="text" size="small"  @click="handleJoinPeople(scope.$index, scope.row.project2)"> {{scope.row[key]}}</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tabletail:[[1,2,3,4,5],[1,2,3,4]],
        aaa:["a","b","c","d","e"],
      }
    },
    }
  }
</script>


<style scoped>


</style>