基于vue.js 2.0，不使用webpack，只在浏览器上单独使用Element UI的Table表格控件完成增删改查页面
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格控件测试</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="/res/css/vue/element-ui-1.2.8.css">
</head>
<body>
<div id="app">
<h2>{{ message }}</h2>
</div>
<div id="tableView">
<!--列表顶部搜索和工具条-->
<el-row>
<el-form :inline="true" :model="searchForm" class="demo-form-inline">
<el-form-item label="ID">
<el-input v-model="searchForm.id" placeholder="ID"></el-input>
</el-form-item>
<el-form-item label="名称">
<el-input v-model="searchForm.name" placeholder="名称"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="searchForm.state" placeholder="状态">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item><el-form-item>
<el-button type="primary" icon="search" @click="searchClick">查询</el-button>
<el-button type="success" icon="plus" @click="addClick">新增</el-button>
</el-form-item>
</el-form>
</el-row>
<!--列表-->
<el-row>
<el-table
:data="tableData"
v-loading.body="loading"
border
@selection-change="selectionChange"
style="width: 100%">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="birth"
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
label="操作">
<template scope="scope">
<el-button :plain="true" type="success" size="small" icon="edit" @click="editClick(scope.row)">编辑</el-button>
<el-button :plain="true" type="danger" size="small" icon="delete" @click="deleteClick(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-row>
<!--列表底部工具条和分页符-->
<el-row style="margin-top: 20px" type="flex" justify="end">
<el-col :span="6" >
<el-button :plain="true" type="danger" size="small" icon="delete" @click="removeSelection">删除所选</el-button>
</el-col>
<el-col :span="18" >
<el-pagination
style="float: right"
@size-change="pageSizeChange"
@current-change="currentPageChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 50]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</el-col>
</el-row>
<!--编辑界面-->
<el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false">
<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
<el-form-item label="姓名" prop="name">
<el-input v-model="editForm.name" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="editForm.sex">
<el-radio class="radio" :label="1">男</el-radio>
<el-radio class="radio" :label="0">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="年龄">
<el-input-number v-model="editForm.age" :min="0" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="生日">
<el-date-picker type="date" placeholder="选择日期" v-model="editForm.birth"></el-date-picker>
</el-form-item>
<el-form-item label="地址">
<el-input type="textarea" v-model="editForm.address"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="editFormVisible = false">取消</el-button>
<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
</div>
</el-dialog>
</div>
<script src="/res/js/vue/vue-2.2.0.min.js"></script>
<script src="/res/js/vue/element-ui-1.2.8.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
message: "表格控件测试"
}
});
var tableView = new Vue({
el: "#tableView",
data: {
//列表数据
tableData: [{
birth: "2016-05-03",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
}, {
birth: "2016-05-02",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
}, {
birth: "2016-05-04",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
}, {
birth: "2016-05-01",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
}],
//显示加载中样式
loading:false,
//搜索表单
searchForm: {
id: "",
name: "",
state: ""
},
//多选值
multipleSelection: [],
//当前页
currentPage:3,
//分页大小
pageSize:100,
//总记录数
total:800,
//删除的弹出框
deleteVisible:false,
//编辑界面是否显示
editFormVisible: false,
editLoading: false,
editFormRules: {
name: [
{ required: true, message: "请输入姓名", trigger: "blur" }
]
},
//编辑界面数据
editForm: {
id: 0,
name: "",
sex: -1,
age: 0,
birth: "",
address: ""
},
},
methods:{
//表格重新加载数据
loadingData:function() {
var _self = this;
_self.loading = true;
setTimeout(function(){
console.info("加载数据成功");
_self.loading = false;
},300);
},
//表格编辑事件
editClick:function(row) {
this.editFormVisible = true;
this.editForm = Object.assign({}, row);
},
//表格删除事件
deleteClick:function(row) {
var _self = this;
this.$confirm("确认删除" + row.name +"吗?", "提示", {
type: "warning"
}).then(function(){
_self.$message({
message: row.name + "删除成功",
type: "success"
});
_self.loadingData();//重新加载数据
}).catch(function(e){
if(e != "cancel")
console.log("出现错误：" + e);
});
},
//新建事件
addClick:function() {
var _self = this;
this.editFormVisible = true;
//_self.loadingData();//重新加载数据
},
//表格查询事件
searchClick:function() {
alert("搜索");
var _self = this;
_self.loadingData();//重新加载数据
},
//表格勾选事件
selectionChange:function(val) {
for(var i=0;i<val.length;i++) {
var row = val[i];
}
this.multipleSelection = val;
console.info(val);
},
//删除所选，批量删除
removeSelection:function() {
var _self = this;
var multipleSelection = this.multipleSelection;
if(multipleSelection.length < 1) {
_self.$message({
message: "请至少选中一条记录",
type: "error"
});
return;
}
var ids = "";
for(var i=0;i<multipleSelection.length;i++) {
var row = multipleSelection[i];
ids += row.name + ","
}
this.$confirm("确认删除" + ids +"吗?", "提示", {
type: "warning"
}).then(function(){
_self.$message({
message: ids + "删除成功",
type: "success"
});
_self.loadingData();//重新加载数据
}).catch(function(e){
if(e != "cancel")
console.log("出现错误：" + e);
});
},
//分页大小修改事件
pageSizeChange:function(val) {
console.log("每页 " + val +" 条");
this.pageSize = val;
var _self = this;
_self.loadingData();//重新加载数据
},
//当前页修改事件
currentPageChange:function(val) {
this.currentPage = val;
console.log("当前页: " + val);
var _self = this;
_self.loadingData();//重新加载数据
},
//保存点击事件
editSubmit:function(){
console.info(this.editForm);
}
}
})
</script>
</body>
</html>效果
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
- 上一篇： 通达OA开发 常用网址的一点小改动 你能看出来吗
- 下一篇： php 内存泄露检查工具valgrind
