基于vue.js 2.0，不使用webpack，只在浏览器上单独使用Element UI的Table表格控件完成增删改查页面
2017-04-17 15:43
1636 查看
源码：
<!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>
效果
<!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>
效果
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 基于vue.js 2.0，不使用webpack的nodejs服务，只在浏览器上单独使用在Element UI的Tree树形控件
- [js高手之路]Vue2.0基于vue-cli+webpack Vuex用法详解
- [js高手之路]Vue2.0基于vue-cli+webpack同级组件之间的通信教程
- [js高手之路]Vue2.0基于vue-cli+webpack父子组件通信教程
- [js高手之路]Vue2.0基于vue-cli+webpack父子组件通信教程
- [js高手之路]Vue2.0基于vue-cli+webpack父子组件通信教程
- 基于webpack和vue.js搭建的H5端框架(其实主要用于Hybrid开发H5端框架，但是依然能够作为纯web端使用)
- [js高手之路]Vue2.0基于vue-cli+webpack父子组件通信教程
- 在基于vue的webpack脚手架开发中使用了代理转发，结果浏览器发出的请求中不带cookie导致登录时总是session失效怎么办？
- vue.js使用webpack发布，部署到服务器上之后在浏览器中可以查看到vue文件源码
- 使用Nightwatch.js做基于浏览器的web应用自动测试
- 基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
- 学习 webpack+vue.js （3、多页面）
- 学习 webpack+vue.js （2、.vue文件的使用）
- vue2.0的Element UI的表格table列时间戳格式化
- 详解基于webpack和vue.js搭建开发环境
- 使用vue+webpack的多页面框子
- 基于vue.js和webpack的Chat示例
- 使用webpack与vue2.0构建前端工程（一）
- 基于vuejs+webpack的日期选择插件