vue+element 後臺管理系統（一）表格

時間 2019-12-05
標籤 vue+element vue element 後臺管理系統表格简体版
原文原文鏈接
非vue-cli模式！javascript
<!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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。