先简单说明一下,这个Demo引入的vue,iview的方式是标签引入的,没有用到webpack之类的构建工具...
毕竟公司还在用angularjs+jq.
这也是我第一次写文章,大家看看思路就行了,要是有大佬指点指点就更好了
话不多说,先来个效果图
我们再看下极为简单的目录结构
IViewEditTable ## vue+iview 实现的可编辑表格 └── index.html ## 首页 └── js └── editTable.js ## 首页JS └── ivew ## iview相关 └── vue ├── axios.min.js ## axios (ajax) ├── util.js ## 与业务无关的纯工具函数包 └── vue.min.js ## vue (2.x)
首页html:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>可编辑表格</title> <link href="https://www.jb51.net/iview/iview.css" /> </head> <body> <div> <i-table :loading="loading" border :data="dataList" :columns="columnsList" stripe size="small"></i-table> </div> <script src="https://www.jb51.net/vue/axios.min.js"></script> <script src="https://www.jb51.net/vue/vue.min.js"></script> <script src="https://www.jb51.net/iview/iview.min.js"></script> <script src="https://www.jb51.net/vue/util.js"></script> <script src="https://www.jb51.net/js/editTable.js"></script> </body> </html>
首页没什么说的,都是基本的架子. 这是需要渲染的数据及其说明:
{ "Status": 1, "Total": 233, "Items": [{ "ID": 1, "PID": 3, "PRJCODE": "2018-001", //项目编号 不可编辑 "PRJNAME": "淡化海水配套泵站", //项目名称 文本输入框 "PRJTYPE": "基础设施", //项目类型 下拉选项 "JSUNIT": "投资公司", //建设单位 文本输入框 "FLOW_TYPE_CODE":"A02", //流程分类 下拉选项,与数据库以code形式交互 "DATE_START": "2018-12-1", //开工时间 日期选择 "DATE_END": "2019-12-1", //竣工时间 日期选择 "CONTENT": "建设淡化海水配套泵站一座，占地面积约8500平方米", //建设内容 多行输入框 "INVEST_ALL": "1000" //总投资 数字输入框 }] }
还有editTable.js的基本架子,$http是我为了方便在utils最后一行加入的 (angularjs用多了,习惯用\$http)
Vue.prototype.utils = utils window.$http = axios
editTable.js :
var vm = new Vue({ el: '#editTableCtrl', data: function() { return { loading: true, //表格的数据源 dataList: [], // 列 columnsList: [], // 增加编辑状态, 保存状态, 用于操作数据 避免干扰原数据渲染 cloneDataList: [] } }, methods: { getData: function() { var self = this; self.loading = true; $http.get('json/editTable.txt').then(function(res) { self.dataList = res.data.Items; self.loading = false; }); }, }, created: function() { this.getData(); } });
我们再来按照iview的规则编写渲染的列:
//... /** * @name columnsList (浏览器 渲染的列) * @author catkin * @see https://www.iviewui.com/components/table * @param * { * titleHtml : 渲染带有html的表头 列: '资金<em>来源</em>' * editable : true,可编辑的列 必须有字段 * option : 渲染的下拉框列表,如果需要与数据库交互的值与显示的值不同,须使用[{value:'value',label:'label'}]的形式,下面有例子 * date : 渲染成data类型 ,可选参数: * date | daterange: yyyy-MM-dd (默认) * datetime | datetimerange: yyyy-MM-dd HH:mm:ss * year: yyyy * month: yyyy-MM * input : 渲染input类型 ,可选参数为html5所有类型 (额外增加 textarea 属性), 默认text * handle : 数组类型, 渲染操作方式,目前只支持 'edit', 'delete' * } * @version 0.0.1 */ columnsList: [{ width: 80, type: 'index', title: '序号', align: 'center' }, { align: 'center', title: '项目编号', key: 'PRJCODE' }, { align: 'center', title: '项目名称', titleHtml: '项目名称 <i></i>', key: 'PRJNAME', editable: true }, { align: 'center', title: '项目分类', titleHtml: '项目分类 <i></i>', key: 'PRJTYPE', option: ['产业项目', '基础设施', '民生项目', '住宅项目'], editable: true }, { align: 'center', title: '建设单位', titleHtml: '建设单位 <i></i>', key: 'JSUNIT', editable: true }, { align: 'center', title: '流程分类', titleHtml: '流程分类 <i></i>', key: 'FLOW_TYPE_CODE', option: [{ value: 'A01', label: '建筑-出让' }, { value: 'A02', label: '建筑-划拨' }, { value: 'B01', label: '市政-绿化' }, { value: 'B02', label: '市政-管线' }], editable: true }, { align: 'center', title: '开工时间', titleHtml: '开工时间 <i></i>', key: 'DATE_START', //这里在后面处理的时候会分割成['month','yyyy-MM']的数组,分别代表iview的DatePicker组件选择日期的格式与数据库传过来时页面显示的格式 date: 'month_yyyy-MM', editable: true }, { align: 'center', title: '竣工时间', titleHtml: '竣工时间 <i></i>', key: 'DATE_END', date: 'month_yyyy-MM', editable: true }, { align: 'center', title: '建设内容', titleHtml: '建设内容 <i></i>', key: 'CONTENT', input: 'textarea', editable: true }, { align: 'center', title: '总投资(万元)', titleHtml: '总投资<br />(万元) <i></i>', key: 'INVEST_ALL', input: 'number', editable: true }, { title: '操作', align: 'center', width: 150, key: 'handle', handle: ['edit', 'delete'] }] //...