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

非vue-cli模式！
<!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 后台管理系统（一）表格

攻城狮Lee丶

引用和评论

你肯能不太熟知的布局技巧

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

前站 - 前端导航，搜索社区，阅读文章，提升技术

前端开发工具

100个React最佳实践小技巧

开发插件集合
