<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="element.css">
<!-- import Vue before Element -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="element.js"></script>
</head>
<body>
<div id='app'>
<el-button type="text" @click="dialogTableVisible = true">打开表格</el-button>
<el-button type="text" @click="dialogFormVisible = true">打开表单</el-button>
<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
<el-table :data="gridData">
<el-table-column property="date" label="日期" width="120"></el-table-column>
<el-table-column property="name" label="姓名" width="80"></el-table-column>
<el-table-column property="address" label="地址" width="250"></el-table-column>
<el-table-column property="btn" label="操作" width="200">
<!--
<template slot-scope="scope" >
<el-switch
style="display: block;"
v-model="scope.row.delivery"
active-text="是"
inactive-text="否">
</el-switch>
</template>
-->
<template slot-scope="scope">
<el-button @click="" size="mini" click="handleDelete(scope.$index, scope.row)">编辑</el-button>
<el-button @click="" size="mini">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-dialog>
<!-- Form -->
<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="dialogFormVisible = false">确 定</el-button>
<el-button type="primary" @click="$message('已经上传过了，无需重复上传！');">alert提示</el-button>
</div>
</el-dialog>
</div>
</body>
<script>
var Main = {
data() {
return {
gridData: [{
date: '2016-05-02',
name: '王小虎1',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎2',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎3',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎4',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎5',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-03',
name: '王小虎6',
address: '上海市普陀区金沙江路 1518 弄'
}],
dialogTableVisible: false,
dialogFormVisible: false,
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
formLabelWidth: '220px'
};
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>
</html>
静态Html、jsp、php等使用element ui最简单直观例子（含table/对话框服及js/css等）
1星 需积分: 46 87 浏览量
2020-12-04
17:46:19
上传
评论 1
收藏 149KB RAR 举报 
el.rar （6个子文件） 
element.css 195KB element-icons.ttf 11KB element-icons.woff 6KB
test2.html 4KB element.js 483KB test.html 3KB
评论1