vue+element 后台管理系统（一）表格_Vue.js

上一篇: 基于 vue.js 实现图片本地预览 +... 下一篇:新的征程——再见2017，你好2018

vue+element 后台管理系统（一）表格

发布时间：2019-05-29 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了vue+element 后台管理系统（一）表格，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

非vue-cli模式！

Vue({ el: '#app', data() { return { tableData3: [], multipleSelection: [], title:"", fullscreenLoading: true } }, mounted(){ const loading = this.$loading({ lock: true, text: '加载中', spinner: 'el-icon-loading', customClass:"load_text", background: 'rgba(0, 0, 0, 0.4)' }); for(var i=0;i<12;i++){ this.tableData3.push({ id:i, date: '2016-05-07', name: '王小虎', province:'哈尔滨', zip:'150000', city:'南岗区', address: '上海市普陀区金沙江路 1518 弄' }) } setTimeout(() => { loading.close(); }, 2000); }, methods: { toggleSelection(rows) { if (rows) { rows.forEach(row => { this.$refs.multipleTable.toggleRowSelection(row); }); } else { this.$refs.multipleTable.clearSelection(); } }, handleSelectionChange(val) { this.multipleSelection = val; }, handleClick(row) { console.log(row); if(this.multipleSelection.length>1){ this.$message({ message: '只能选中一条数据', type: 'warning' }); return false; } else if(this.multipleSelection.length<=0){ this.$message({ message: '至少选中一条数据', type: 'warning' }); return false; } this.$message({ showClose: true, message: '你选中了ID:'+this.multipleSelection[0].id, type: 'success' }); }, pageChange(e){ //一般发起请求重新获取数据更新 console.log(e) } } }) " title="" data-original-title="复制">

<!DOCTYPE html>
<html class="over_hidd">
    <head>
        <meta charset="UTF-8">
        <title>vue+element后台系统"</title>        
        <meta name="Author" content="Lee">
        <meta name="Keywords" content="vue+element后台系统">
        <link rel="stylesheet" href="css/public.css" />
        <link rel="stylesheet" href="css/element.css" />
        <style>
            #app{width: 50%; margin: 0 auto;}
        </style>
    </head>
    <body class="over_hidd">
        <div id="app" class="over_hidd">
            <el-table :data="tableData3" border style="width: 100%">
                <el-table-column fixed prop="date" label="日期" width="150"></el-table-column>
                <el-table-column prop="name"  label="姓名" width="120"></el-table-column>
                <el-table-column prop="province" label="省份" width="120"> </el-table-column>
                <el-table-column prop="city" label="市区" width="120"></el-table-column>
                <el-table-column prop="address" label="地址" width="300"></el-table-column>
                <el-table-column prop="zip" label="邮编" width="120"></el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                      <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                        <el-button type="text" size="small">编辑</el-button>
                      </template>
                </el-table-column>
              </el-table>
            <el-pagination
                @current-change="pageChange"
                  background
                  layout="prev, pager, next"
                  :total="200">
            </el-pagination>
        </div>
    </body>
    <script type="text/javascript" src="js/vue.js" ></script>
    <script type="text/javascript" src="js/element.js" ></script>
    <script>
        new Vue({
              el: '#app',
               data() {
                  return {
                    tableData3: [],
                    multipleSelection: [],
                    title:"",
                    fullscreenLoading: true
                  }
            }, 
            mounted(){
                const loading = this.$loading({
                      lock: true,
                      text: '加载中',
                      spinner: 'el-icon-loading',
                      customClass:"load_text",
                      background: 'rgba(0, 0, 0, 0.4)'
                });
                for(var i=0;i<12;i++){
                    this.tableData3.push({
                        id:i,
                          date: '2016-05-07',
                          name: '王小虎',
                          province:'哈尔滨',
                          zip:'150000',
                          city:'南岗区',
                          address: '上海市普陀区金沙江路 1518 弄'
                    })
                }
                setTimeout(() => {
                      loading.close();
                }, 2000);
            },
            methods: {
                toggleSelection(rows) {
                    if (rows) {
                          rows.forEach(row => {
                            this.$refs.multipleTable.toggleRowSelection(row);
                          });
                    } else {
                          this.$refs.multipleTable.clearSelection();
                    }
                },
                  handleSelectionChange(val) {
                    this.multipleSelection = val;
                  },
                  handleClick(row) {
                    console.log(row);
                    if(this.multipleSelection.length>1){
                        this.$message({
                              message: '只能选中一条数据',
                              type: 'warning'
                        });
                          return false;
                    } else if(this.multipleSelection.length<=0){
                        this.$message({
                              message: '至少选中一条数据',
                              type: 'warning'
                        });
                          return false;
                    }
                    this.$message({
                          showClose: true,
                          message: '你选中了ID:'+this.multipleSelection[0].id,
                          type: 'success'
                    });
                  },
                  pageChange(e){
                      //一般发起请求重新获取数据更新
                      console.log(e)
                  }
            }
        })
    </script>
</html>

脚本宝典总结

以上是脚本宝典为你收集整理的vue+element 后台管理系统（一）表格全部内容，希望文章能够帮你解决vue+element 后台管理系统（一）表格所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：Vue

上一篇: 基于 vue.js 实现图片本地预览 +... 下一篇:新的征程——再见2017，你好2018

猜你在找的Vue.js相关文章

Vue 3.0 风格指南 2024-10-19
Vue-SuperSlide(SuperSlide component for Vue) 2019-05-07
基于vue2.0的weex实践（前端视角） 2019-05-07
手把手教你写 Vue UI 组件库@vue2.0 2019-05-07
解决vue报错Failed to mount component 2019-05-07
Vue学习笔记之vue-cli项目搭建及解析 2019-05-07
Vue.js—单元测试 2019-05-07
vue2.0脚手架的安装和项目搭建 2019-05-07
Vue经典开源项目汇总demo实例github下载教程 2018-12-04
使用Vue.js构建Wordpress Gutenberg块 2018-11-17

全站导航更多

最新Vue.js教程

热门Vue.js教程