1. 首頁 > 生活百科 > >

Vue前端框架基礎+Element的使用( 五 )

生活百科

2.2.2 Container 布局容器

  • 官網給出的 Container 容器布局案例
    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.el-header {background-color: #B3C0D1;color: #333;line-height: 60px;}.el-aside {color: #333;}</style></head><body><div id="app"><el-container style="height: 500px; border: 1px solid #eee"><el-aside width="200px" style="background-color: rgb(238, 241, 246)"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>導航一</template><el-menu-item-group><template slot="title">分組一</template><el-menu-item index="1-1">選項1</el-menu-item><el-menu-item index="1-2">選項2</el-menu-item></el-menu-item-group><el-menu-item-group title="分組2"><el-menu-item index="1-3">選項3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">選項4</template><el-menu-item index="1-4-1">選項4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i>導航二</template><el-menu-item-group><template slot="title">分組一</template><el-menu-item index="2-1">選項1</el-menu-item><el-menu-item index="2-2">選項2</el-menu-item></el-menu-item-group><el-menu-item-group title="分組2"><el-menu-item index="2-3">選項3</el-menu-item></el-menu-item-group><el-submenu index="2-4"><template slot="title">選項4</template><el-menu-item index="2-4-1">選項4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-setting"></i>導航三</template><el-menu-item-group><template slot="title">分組一</template><el-menu-item index="3-1">選項1</el-menu-item><el-menu-item index="3-2">選項2</el-menu-item></el-menu-item-group><el-menu-item-group title="分組2"><el-menu-item index="3-3">選項3</el-menu-item></el-menu-item-group><el-submenu index="3-4"><template slot="title">選項4</template><el-menu-item index="3-4-1">選項4-1</el-menu-item></el-submenu></el-submenu></el-menu></el-aside><el-container><el-header style="text-align: right; font-size: 12px"><el-dropdown><i class="el-icon-setting" style="margin-right: 15px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>查看</el-dropdown-item><el-dropdown-item>新增</el-dropdown-item><el-dropdown-item>刪除</el-dropdown-item></el-dropdown-menu></el-dropdown><span>王小虎</span></el-header><el-main><el-table :data="https://www.huyubaike.com/biancheng/tableData"><el-table-column prop="date" label="日期" width="140"></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></el-main></el-container></el-container></div><script src="https://www.huyubaike.com/biancheng/js/vue.js"></script><script src="https://www.huyubaike.com/biancheng/element-ui/lib/index.js"></script><link rel="stylesheet" ><script>new Vue({el:"#app",data() {const item = {date: '2016-05-02',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'};return {tableData: Array(20).fill(item)}}})</script></body></html>
2.3 案例2.3.1 基本頁面準備<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app"></div><script src="https://www.huyubaike.com/biancheng/js/vue.js"></script><script src="https://www.huyubaike.com/biancheng/element-ui/lib/index.js"></script><link rel="stylesheet" ><script>new Vue({el: "#app"})</script></body></html>2.3.2 完整代碼展示
前端內容不是本人學習重點，此處不做詳細說明
步驟說明：
  1. 視圖樣式
  2. 處理事件所需的函數
  3. 對Vue核心對象和視圖數據綁定模型
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.el-table .warning-row {background: oldlace;}.el-table .success-row {background: #f0f9eb;}</style></head><body><div id="app"><!--搜索表單--><el-form :inline="true" :model="brand" class="demo-form-inline"><el-form-item label="當前狀態"><el-select v-model="brand.status" placeholder="當前狀態"><el-option label="啟用" value="https://www.huyubaike.com/biancheng/1"></el-option><el-option label="禁用" value="https://www.huyubaike.com/biancheng/0"></el-option></el-select></el-form-item><el-form-item label="企業名稱"><el-input v-model="brand.companyName" placeholder="企業名稱"></el-input></el-form-item><el-form-item label="品牌名稱"><el-input v-model="brand.brandName" placeholder="品牌名稱"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查詢</el-button></el-form-item></el-form><!--按鈕--><!--@click="dialogVisible = true"單擊時將dialogVisible設置為true，展示對話框--><el-row><el-button type="danger" plain>批量刪除</el-button><el-button type="primary" plain @click="dialogVisible = true">新增</el-button></el-row><!--添加數據對話框表單--><el-dialogtitle="編輯品牌":visible.sync="dialogVisible"width="30%"><el-form ref="form" :model="brand" label-width="80px"><el-form-item label="品牌名稱"><el-input v-model="brand.brandName"></el-input></el-form-item><el-form-item label="企業名稱"><el-input v-model="brand.companyName"></el-input></el-form-item><el-form-item label="排序"><el-input v-model="brand.ordered"></el-input></el-form-item><el-form-item label="備注"><el-input type="textarea" v-model="brand.description"></el-input></el-form-item><el-form-item label="狀態"><el-switch v-model="brand.status"active-value="https://www.huyubaike.com/biancheng/1"inactive-value="https://www.huyubaike.com/biancheng/0"></el-switch></el-form-item><el-form-item><el-button type="primary" @click="addBrand">提交</el-button><el-button @click="dialogVisible = false">取消</el-button></el-form-item></el-form></el-dialog><!--表格--><!--其中<el-table-column></el-table-column>標簽的prop屬性值需要和Vue核心對象返回tableData的對象屬性名一致 --><template><!--@selection-change="handleSelectionChange"監聽到復選框勾選時 ， 獲取行的記錄需要在Vue核心對象中實現handleSelectionChange函數--><el-table:data="https://www.huyubaike.com/biancheng/tableData"style="width: 100%":row-class-name="tableRowClassName"@selection-change="handleSelectionChange"><!--表格復選框--><el-table-columntype="selection"width="55"></el-table-column><el-table-columntype="index"width="50"></el-table-column><el-table-columnprop="brandName"label="品牌名稱"align="center"></el-table-column><el-table-columnprop="companyName"label="企業名稱"align="center"></el-table-column><el-table-columnprop="ordered"align="center"label="排序"></el-table-column><el-table-columnprop="status"align="center"label="當前狀態"></el-table-column><el-table-columnalign="center"label="操作"><el-row><el-button type="primary">修改</el-button><el-button type="danger">刪除</el-button></el-row></el-table-column></el-table></template><!--分頁工具條--><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[5, 10, 15, 20]":page-size="5"layout="total, sizes, prev, pager, next, jumper":total="400"></el-pagination></div><script src="https://www.huyubaike.com/biancheng/js/vue.js"></script><script src="https://www.huyubaike.com/biancheng/element-ui/lib/index.js"></script><link rel="stylesheet" ><script>new Vue({el: "#app",methods: {tableRowClassName({row, rowIndex}) {if (rowIndex === 1) {return 'warning-row';} else if (rowIndex === 3) {return 'success-row';}return '';},// 復選框選中后執行的方法handleSelectionChange(val) {this.multipleSelection = val;console.log(this.multipleSelection)},// 查詢方法onSubmit() {console.log(this.brand);},// 添加數據addBrand(){console.log(this.brand);},//分頁handleSizeChange(val) {console.log(`每頁 ${val} 條`);},handleCurrentChange(val) {console.log(`當前頁: ${val}`);}},data() {return {// 當前頁碼currentPage: 4,// 添加數據對話框是否展示的標記dialogVisible: false,// 品牌模型數據brand: {status: '',brandName: '',companyName: '',id:"",ordered:"",description:""},// 復選框選中數據集合multipleSelection: [],// 表格數據tableData: [{brandName: '華為',companyName: '華為科技有限公司',ordered: '100',status: "1"}, {brandName: '華為',companyName: '華為科技有限公司',ordered: '100',status: "1"}, {brandName: '華為',companyName: '華為科技有限公司',ordered: '100',status: "1"}, {brandName: '華為',companyName: '華為科技有限公司',ordered: '100',status: "1"}]}}})</script></body></html>

推薦閱讀