vue简单了解 样式、跳转、按钮 elementui表格

1.模板标签

页面所有的表格按钮都放到template里

<template>

</template>

2.标题

这里用的是element ui的样式,适用于网页

<el-header class="header">

        <h1>标题</h1>

      </el-header>

3.页面导航标签 

van-tabs用的是vant的样式,适用于移动端页面

v-card用的是vertify的样式,适用于移动端页面,卡片样式

点击三个标签即可跳转

<van-tabs

      v-model="active"

      color="#2c3e50"

      @click="onClick"

    >

      <van-tab title="页面1">

                <v-card>

                </v-card>

      </van-tab>

<van-tab title="页面2">

      </van-tab>

<van-tab title="页面3">

      </van-tab>

4.行列

<v-row>行

<v-col>列

一列三行

<v-col>

<v-row></v-row>

<v-row></v-row>

<v-row></v-row>

</v-col>

5.按钮和图标

(1)图标<v-icon small>mdi-delete</v-icon>

(2)按钮

<v-btn

          class="purple"

          color="primary"

          dark

        >

         这是一个按钮

        </v-btn>

(3)带图标的按钮

<v-btn

         icon

         @click="save(item.followId)" >

        <v-icon small>mdi-pencil</v-icon>  

        </v-btn>

6.elementui表格

<el-table :data="tableData" style="width: 100%">

            <el-table-column prop="name"  width="100">

            </el-table-column>

              <el-table-column v-for="i in time" :label="i" align="center" header-align="center">

                    <template slot-scope="scope">{{scope.row[i]}}</template>

                </el-table-column>

                <el-table-column

                label=""

                width="80">

                <v-btn small

              depressed

                text

                color="primary"

              @click="sendRequest(item)">

                查看详情

              </v-btn>

              </el-table-column>

      </el-table>

vue初始化参数

 time: ['总访问次数', '总访客数'],

 tableData: [{

            name: '热榜',

            '总访问次数': 33,   

            '总访客数':10,

        },{

                name: '热点话题',

            '总访问次数': 45,

               '总访客数':18,

}]