• 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>
  • 相关阅读:
    spring-boot集成8：集成shiro,jwt
    spring-boot集成6：集成redis实现字典缓存功能
    公告：《那些年，追寻Jmeter的足迹》上线
    那些年，追寻JMeter的足迹，免费送……
    Jmeter系列培训（1）--开山篇
    FlytestingToolkit工具派送，懒人的测试思考
    飞测历史分享，目录整理篇
    jenkins系列（11）-自动打tag升级篇
    大数据测试笔记（1）-测试的3条建议
    聊聊我们的线上巡检（2）
  • 原文地址：https://www.cnblogs.com/LiuFengH/p/11099302.html
Copyright © 2020-2023  润新知