一.基础知识
默认展示根组件当中的内容--------------
element自动导包并且加入了组件
二.element组件--table表格
<!-- table表格 --> <el-table :data="tableData" stripe style="width: 100%"> <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 prop="address" label="地址"> </el-table-column> </el-table>
tableData: [ { date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", }, { date: "2016-05-04", name: "王小虎", address: "上海市普陀区金沙江路 1517 弄", }, { date: "2016-05-01", name: "王小虎", address: "上海市普陀区金沙江路 1519 弄", }, { date: "2016-05-03", name: "王小虎", address: "上海市普陀区金沙江路 1516 弄", }, ],
三.pagination分页
<template> <div> <!-- button按钮 --> <el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </el-row> <!-- table表格 --> <el-table :data="tableData" stripe style="width: 100%"> <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 prop="address" label="地址"> </el-table-column> </el-table> </div> </template> <script> export default { data () { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] } } }; </script> <style> </style>
<!-- pre 分页--> <el-pagination background layout="total,sizes,prev, pager, next,jumper" :total="10"> </el-pagination>
四. Dialog对话框组件
<!-- 对话框 --> <!-- Table --> <el-button type="text" @click="dialogTableVisible = true" >打开嵌套表格的 Dialog</el-button > <el-dialog title="收货地址" :visible.sync="dialogTableVisible"> <el-table :data="gridData"> <el-table-column property="date" label="日期" width="150" ></el-table-column> <el-table-column property="name" label="姓名" width="200" ></el-table-column> <el-table-column property="address" label="地址"></el-table-column> </el-table> </el-dialog>
<script> export default { data() { return { gridData: [ { date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", }, { date: "2016-05-04", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", }, { date: "2016-05-01", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", }, { date: "2016-05-03", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", }, ], dialogTableVisible: false, tableData: [ { date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", }, { date: "2016-05-04", name: "王小虎", address: "上海市普陀区金沙江路 1517 弄", }, { date: "2016-05-01", name: "王小虎", address: "上海市普陀区金沙江路 1519 弄", }, { date: "2016-05-03", name: "王小虎", address: "上海市普陀区金沙江路 1516 弄", }, ], }; }, methods: { handleSizeChange: function (val) { alert("每页记录数变化" + val); }, handleCurrentChange: function (val) { alert("页码发生变化" + val); }, }, }; </script> <style> </style>
五. form表单
<template> <div> <!-- button按钮 --> <el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </el-row> <!-- table表格 --> <el-table :data="tableData" stripe style="width: 100%"> <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 prop="address" label="地址"> </el-table-column> </el-table> <!-- pre 分页--> <el-pagination background layout="total,sizes,prev, pager, next,jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="1000" > <!-- 每页展示的记录数 当前页码发生变化 --> </el-pagination> <!-- 对话框 --> <!-- Table --> <el-button type="text" @click="dialogTableVisible = true" >打开嵌套表格的 Dialog</el-button > <el-dialog title="收货地址" :visible.sync="dialogTableVisible"> <el-table :data="gridData"> <el-table-column property="date" label="日期" width="150" ></el-table-column> <el-table-column property="name" label="姓名" width="200" ></el-table-column> <el-table-column property="address" label="地址"></el-table-column> </el-table> </el-dialog> <!-- form表单 --> <el-button type="text" @click="dialogFormVisible = true" >打开嵌套form的 Dialog</el-button > <el-dialog title="form表单" :visible.sync="dialogFormVisible"> <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="活动名称"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="活动区域"> <el-select v-model="form.region" placeholder="请选择活动区域"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-form-item> <el-form-item label="活动时间"> <el-col :span="11"> <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%" ></el-date-picker> </el-col> <el-col class="line" :span="2">-</el-col> <el-col :span="11"> <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%" ></el-time-picker> </el-col> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">提交</el-button> <el-button>取消</el-button> </el-form-item> </el-form> </el-dialog> </div> </template> <script> export default { data() { return { form: { name: '', region: '', date1: '', date2: '', }, gridData: [ { date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", }, { date: "2016-05-04", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", }, { date: "2016-05-01", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", }, { date: "2016-05-03", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", }, ], dialogTableVisible: false, dialogFormVisible: false, tableData: [ { date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", }, { date: "2016-05-04", name: "王小虎", address: "上海市普陀区金沙江路 1517 弄", }, { date: "2016-05-01", name: "王小虎", address: "上海市普陀区金沙江路 1519 弄", }, { date: "2016-05-03", name: "王小虎", address: "上海市普陀区金沙江路 1516 弄", }, ], }; }, methods: { handleSizeChange: function (val) { alert("每页记录数变化" + val); }, handleCurrentChange: function (val) { alert("页码发生变化" + val); }, onSubmit:function(){ alert(JSON.stringify(this.form)); } }, }; </script> <style> </style>