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表格

1.  
   <el-table :data="tableData" style="width: 100%">
2.  
    
3.  
               <el-table-column prop="name"  width="100">
4.  
    
5.  
               </el-table-column>
6.  
    
7.  
                 <el-table-column v-for="i in time" :label="i" align="center" header-align="center">
8.  
    
9.  
                       <template slot-scope="scope">{{scope.row[i]}}</template>
10.  
     
11.  
                    </el-table-column>
12.  
     
13.  
                    <el-table-column
14.  
     
15.  
                    label=""
16.  
     
17.  
                    width="80">
18.  
     
19.  
                    <v-btn small
20.  
     
21.  
                  depressed
22.  
     
23.  
                    text
24.  
     
25.  
                    color="primary"
26.  
     
27.  
                  @click="sendRequest(item)">
28.  
     
29.  
                    查看详情
30.  
     
31.  
                  </v-btn>
32.  
     
33.  
                  </el-table-column>
34.  
     
35.  
          </el-table>

vue初始化参数

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

 tableData: [{

            name: '热榜',

            '总访问次数': 33,   

            '总访客数':10,

        },{

                name: '热点话题',

            '总访问次数': 45,

               '总访客数':18,

}]

这篇好文章是转载于：学新通技术网