vue temeplete

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.10.0/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.10.0/lib/index.js"></script>
</head>
<body>
<style>
    .el-row {
            margin-bottom: 5px;
            &:last-child;{ margin-bottom: 0; }
        }
    
        .el-col {
            border-radius: 4px;
        }
    
        .bg-purple-dark {
            background: #99a9bf;
        }
    
        .bg-purple {
            background: #d3dce6;
        }
    
        .bg-purple-light {
            background: #e5e9f2;
        }
    
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }
    
        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
    
        .el-table .cell {
            line-height: 12px;
        }
        [v-cloak]{
            display: none
        }
        .el-table__empty-block{
            height:20%;
        }
    </style>
<div id="app">
    <el-row :gutter="5">
        <el-col :span="3">
            <el-select v-model="status"  size="small" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
        </el-col>
        <el-col :span="3">
            <el-input v-model="no" size="small" type="text" placeholder="no" clearable></el-input>
        </el-col> 
        <el-col :span="6">
            <el-date-picker v-model="timed" v-on:change="change1"
                            type="daterange"
                            value-format="yyyy-MM-dd"
                            size="small"
                            range-separator="-"
                            start-placeholder="Begin"
                            end-placeholder="End">
            </el-date-picker>
        </el-col>
    </el-row>
    <el-row>
        <el-button size="small" icon="el-icon-search" v-cloak v-on:click="add">Query</el-button>
        <el-button size="small" icon="el-icon-news" v-cloak v-on:click="add">Create</el-button>
        <el-button size="small" icon="el-icon-edit" v-cloak v-on:click="add">Revise</el-button>
        <el-button size="small" icon="el-icon-delete" v-cloak v-on:click="add">Delete</el-button>
        <el-dropdown size="small" split-button type="primary" v-cloak v-on:command="handleClick">
            Approval Process 
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="0" >Submit</el-dropdown-item>
                <el-dropdown-item command="1">Reviewed</el-dropdown-item>
                <el-dropdown-item command="2">Confirm</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        <el-button size="small" icon="el-icon-refresh-left" v-cloak v-on:click="add">Reject</el-button>
        <el-button size="small" icon="el-icon-upload2" v-cloak v-on:click="add">Import</el-button>
        <el-button size="small" icon="el-icon-download" v-cloak v-on:click="add">Export</el-button>
    </el-row>

    <el-table :data="tableData" size="small"
                      :cell-style="{'font-size': '10px',}"
                      v-on:selection-change="handleSelectionChange" border
                      :header-cell-style="getRowClass">
        <el-table-column type="selection" width="37"></el-table-column>
        <el-table-column prop="date" label="日期" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
        <el-table-column property="closed" label="close">
            <template slot-scope="scope">
                <el-switch  active-color="#13ce66" inactive-color="#ff4949" v-model="scope.row.closed" v-on:change=changestatush(scope.$index,scope.row)>
                </el-switch>
            </template>
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
    <div class="block" >
            <el-pagination background
                           v-on:current-change="handleCurrentChange"
                           current-page.sync="currentPage"
                           :page-size="10"
                           layout="prev, pager, next "
                           :total="total">
            </el-pagination>
        </div>
        <div v-if="isLoaded" class="el-loading-mask">
            <div class="el-loading-spinner">
                <svg viewBox="25 25 50 50" class="circular">
                    <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                </svg>
                <div class="el-loading-text">
                    Loading...
                </div>
            </div>
        </div>

</div>
    <script>
  var dd = new Vue({
        el: '#app',
        created(){
            this.options=[{ value: '选项1', label: '黄金糕'}, { value: '选项2', label: '双皮奶' }, {value: '选项3',label: '蚵仔煎'}, {value: '选项4',label: '龙须面'}, {value: '选项5',label: '北京烤鸭'}];
            this.tableData= [{
                        date: '2016-05-02',
                        name: '王小虎',
                        closed:true,
                        address: '上海市普陀区金沙江路 1518 弄',
                    },
                     {
                        date: '2016-05-04',
                        name: '王小虎',
                        closed:true,
                        address: '上海市普陀区金沙江路 1517 弄',
                    },
                     {
                        date: '2016-05-04',
                        name: '王小虎',
                        closed:true,
                        address: '上海市普陀区金沙江路 1517 弄',
                    },
                     {
                        date: '2016-05-04',
                        name: '王小虎',
                        closed:true,
                        address: '上海市普陀区金沙江路 1517 弄',
                    },
                     {
                        date: '2016-05-04',
                        name: '王小虎',
                        closed:true,
                        address: '上海市普陀区金沙江路 1517 弄',
                    },
                     {
                        date: '2016-05-04',
                        name: '王小虎',
                        closed:true,
                        address: '上海市普陀区金沙江路 1517 弄',
                    },
                     {
                        date: '2016-05-04',
                        name: '王小虎',
                        closed:true,
                        address: '上海市普陀区金沙江路 1517 弄',
                    },
                     {
                        date: '2016-05-04',
                        name: '王小虎',
                        closed:true,
                        address: '上海市普陀区金沙江路 1517 弄',
                    },
                     {
                        date: '2016-05-04',
                        name: '王小虎',
                        closed:true,
                        address: '上海市普陀区金沙江路 1517 弄',
                    },
                     {
                        date: '2016-05-04',
                        name: '王小虎',
                        closed:true,
                        address: '上海市普陀区金沙江路 1517 弄',
                    },
                    ];
            this.total=11;
            this.isLoaded=false;
        },
        data:{
            options:[],
            isLoaded :true,
            status: '',
            no:'',
            timed:'',
            begin:'',
            end:'',
            tableData:[],
            total:1,
            multipleSelection:[],
        },
        methods: {
            change1(val) {
                console.log(val);
                if(val.length==2){
                    this.begin=val[0];
                    this.end=val[1];
                }
            },
            add(){
                
            },
            handleClick(command) {
                console.log(command);
            },
            getRowClass({ row, column, rowIndex, columnIndex }) {
                if (rowIndex === 0) {
                    return 'color: #333333;height:20px;font-size: 13px; background-color: #d9edf7;'
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(val);
            },
            changestatush(val,index){
                console.log(val,index);
            },
            handleCurrentChange(val) {
                  console.log(val);
                  this.tableData= [{
                        date: '2016-05-02',
                        name: '王小虎',
                        closed:true,
                        address: '上海市普陀区金沙江路 1518 弄',
                    }
                    ]
              },
        }
  });
    </script>
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.10.0/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.10.0/lib/index.js"></script>
</head>
<body>
<style>
.el-row {
margin-bottom: 5px;
&:last-child;{ margin-bottom: 0; }
}
 
.el-col {
border-radius: 4px;
}
 
.bg-purple-dark {
background: #99a9bf;
}
 
.bg-purple {
background: #d3dce6;
}
 
.bg-purple-light {
background: #e5e9f2;
}
 
.grid-content {
border-radius: 4px;
min-height: 36px;
}
 
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
 
.el-table .cell {
line-height: 12px;
}
[v-cloak]{
display: none
}
.el-table__empty-block{
height:20%;
}
</style>
<div id="app">
<el-row :gutter="5">
<el-col :span="3">
<el-select v-model="status" size="small" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-col>
<el-col :span="3">
<el-input v-model="no" size="small" type="text" placeholder="no" clearable></el-input>
</el-col>
<el-col :span="6">
<el-date-picker v-model="timed" v-on:change="change1"
type="daterange"
value-format="yyyy-MM-dd"
size="small"
range-separator="-"
start-placeholder="Begin"
end-placeholder="End">
</el-date-picker>
</el-col>
</el-row>
<el-row>
<el-button size="small" icon="el-icon-search" v-cloak v-on:click="add">Query</el-button>
<el-button size="small" icon="el-icon-news" v-cloak v-on:click="add">Create</el-button>
<el-button size="small" icon="el-icon-edit" v-cloak v-on:click="add">Revise</el-button>
<el-button size="small" icon="el-icon-delete" v-cloak v-on:click="add">Delete</el-button>
<el-dropdown size="small" split-button type="primary" v-cloak v-on:command="handleClick">
Approval Process
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="0" >Submit</el-dropdown-item>
<el-dropdown-item command="1">Reviewed</el-dropdown-item>
<el-dropdown-item command="2">Confirm</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-button size="small" icon="el-icon-refresh-left" v-cloak v-on:click="add">Reject</el-button>
<el-button size="small" icon="el-icon-upload2" v-cloak v-on:click="add">Import</el-button>
<el-button size="small" icon="el-icon-download" v-cloak v-on:click="add">Export</el-button>
</el-row>

<el-table :data="tableData" size="small"
:cell-style="{'font-size': '10px',}"
v-on:selection-change="handleSelectionChange" border
:header-cell-style="getRowClass">
<el-table-column type="selection" width="37"></el-table-column>
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column property="closed" label="close">
<template slot-scope="scope">
<el-switch active-color="#13ce66" inactive-color="#ff4949" v-model="scope.row.closed" v-on:change=changestatush(scope.$index,scope.row)>
</el-switch>
</template>
</el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
<div class="block" >
<el-pagination background
v-on:current-change="handleCurrentChange"
current-page.sync="currentPage"
:page-size="10"
layout="prev, pager, next "
:total="total">
</el-pagination>
</div>
<div v-if="isLoaded" class="el-loading-mask">
<div class="el-loading-spinner">
<svg viewBox="25 25 50 50" class="circular">
<circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
</svg>
<div class="el-loading-text">
Loading...
</div>
</div>
</div>

</div>
<script>
var dd = new Vue({
el: '#app',
created(){
this.options=[{ value: '选项1', label: '黄金糕'}, { value: '选项2', label: '双皮奶' }, {value: '选项3',label: '蚵仔煎'}, {value: '选项4',label: '龙须面'}, {value: '选项5',label: '北京烤鸭'}];
this.tableData= [{
date: '2016-05-02',
name: '王小虎',
closed:true,
address: '上海市普陀区金沙江路 1518 弄',
},
{
date: '2016-05-04',
name: '王小虎',
closed:true,
address: '上海市普陀区金沙江路 1517 弄',
},
{
date: '2016-05-04',
name: '王小虎',
closed:true,
address: '上海市普陀区金沙江路 1517 弄',
},
{
date: '2016-05-04',
name: '王小虎',
closed:true,
address: '上海市普陀区金沙江路 1517 弄',
},
{
date: '2016-05-04',
name: '王小虎',
closed:true,
address: '上海市普陀区金沙江路 1517 弄',
},
{
date: '2016-05-04',
name: '王小虎',
closed:true,
address: '上海市普陀区金沙江路 1517 弄',
},
{
date: '2016-05-04',
name: '王小虎',
closed:true,
address: '上海市普陀区金沙江路 1517 弄',
},
{
date: '2016-05-04',
name: '王小虎',
closed:true,
address: '上海市普陀区金沙江路 1517 弄',
},
{
date: '2016-05-04',
name: '王小虎',
closed:true,
address: '上海市普陀区金沙江路 1517 弄',
},
{
date: '2016-05-04',
name: '王小虎',
closed:true,
address: '上海市普陀区金沙江路 1517 弄',
},
];
this.total=11;
this.isLoaded=false;
},
data:{
options:[],
isLoaded :true,
status: '',
no:'',
timed:'',
begin:'',
end:'',
tableData:[],
total:1,
multipleSelection:[],
},
methods: {
change1(val) {
console.log(val);
if(val.length==2){
this.begin=val[0];
this.end=val[1];
}
},
add(){
 
},
handleClick(command) {
console.log(command);
},
getRowClass({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 0) {
return 'color: #333333;height:20px;font-size: 13px; background-color: #d9edf7;'
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
console.log(val);
},
changestatush(val,index){
console.log(val,index);
},
handleCurrentChange(val) {
console.log(val);
this.tableData= [{
date: '2016-05-02',
name: '王小虎',
closed:true,
address: '上海市普陀区金沙江路 1518 弄',
}
]
},
}
});
</script>
</script>
</body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/LiuFengH/p/11099302.html