基于vue.js 2.0，不使用webpack，只在浏览器上单独使用Element UI的Table表格控件完成增删改查页面
来源：互联网 发布：平板如何更新淘宝版本 编辑：程序博客网 时间：2024/05/17 03:18
源码：
<!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>效果
1 0
- 基于vue.js 2.0，不使用webpack，只在浏览器上单独使用Element UI的Table表格控件完成增删改查页面
- 基于vue.js 2.0，不使用webpack的nodejs服务，只在浏览器上单独使用在Element UI的Tree树形控件
- vue.js+Element 增删改查
- vue.js+ element 增删改查
- vue.js+Element 增删改查
- vue+element增删改查
- webpack+vue 在使用element-ui时import 'element-ui/lib/theme-chalk/index.css‘失败
- vue之table表格的增删改查，多选框的多选单选
- vue.js的增删改查
- js实现表格的增删改查
- js实现表格的增删改查
- js实现表格的增删改查
- 使用iBATIS3.0完成增删改查
- 基于Grove的在GridView上的增删改查
- SQLite的使用完成增删改查等
- 使用java原生jdbc完成数据的增删改查
- 使用Element-ui的Table时表格不能显示问题
- 使用Vue.js和Element-UI做一个简单的登录页面
- oralce树形数据结构构建
- MYSQL知识点总结
- 树形结构的jsp展现
- iOS加载本地HTML
- 用arm-linux-gdb调试ARM上的应用程序
- 基于vue.js 2.0，不使用webpack，只在浏览器上单独使用Element UI的Table表格控件完成增删改查页面
- 树形结构的jsp展现 （2）
- JS封装类或对象的最佳方案
- 过滤器，拦截器区别
- 深度学习——sgd等优化方法比较
- 树形结构数据的提交
- 修改WAMPServer默认的网站路径地址的一种方式
- ZOJ-3956-Course Selection System【01背包】【17th浙大校赛】
- Java web
