103 lines
3.6 KiB
Vue
103 lines
3.6 KiB
Vue
<template>
|
|
<div>
|
|
<!-- button -->
|
|
<el-row>
|
|
<el-button plain>朴素按钮</el-button>
|
|
<el-button type="primary" plain>主要按钮</el-button>
|
|
<el-button type="success" plain>成功按钮</el-button>
|
|
<el-button type="info" plain>信息按钮</el-button>
|
|
<el-button type="warning" plain>警告按钮</el-button>
|
|
<el-button type="danger" plain>危险按钮</el-button>
|
|
</el-row>
|
|
<br />
|
|
<!-- table表格 -->
|
|
<el-table :data="tableData" 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>
|
|
<br />
|
|
<!-- pagination分页 -->
|
|
<el-pagination background layout="sizes, prev, pager, next" @size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange" :total="1000">
|
|
</el-pagination>
|
|
<br />
|
|
<!-- 对话框 -->
|
|
<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
|
|
|
|
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
|
|
<el-form :model="form">
|
|
<el-form-item label="活动名称" :label-width="formLabelWidth">
|
|
<el-input v-model="form.name" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="活动区域" :label-width="formLabelWidth">
|
|
<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>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="submit">确 定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</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 弄",
|
|
},
|
|
],
|
|
dialogFormVisible: false,
|
|
form: {
|
|
name: "",
|
|
region: "",
|
|
date1: "",
|
|
date2: "",
|
|
delivery: false,
|
|
type: [],
|
|
resource: "",
|
|
desc: "",
|
|
},
|
|
formLabelWidth: "120px",
|
|
};
|
|
},
|
|
methods: {
|
|
handleSizeChange(val) {
|
|
alert(val);
|
|
},
|
|
handleCurrentChange(val) {
|
|
alert("页码变化：" + val);
|
|
},
|
|
submit() {
|
|
alert(JSON.stringify(this.form));
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style></style>
|