vue iview实现可编辑表的示例代码

首先简单说明一下，本次Demo介绍的vue和iview都是通过标签介绍的，没有使用webpack等构建工具.

毕竟公司还是用angularjs jq。

这也是我第一次写文章。你可以只看思路。如果有大佬指点就更好了

话不多说，先来个效果图

让我们来看看极其简单的目录结构

iviewedittable # # vue iviewindex.html # #首页 edittable.js # #首页JS ivew ## iview相关 vue axios 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=' iview/iview . CSS ' rel=' external no follow ' rel='样式表'/head body style=' background-color : # f0f 3 f 4；div id=' editTableCtrl ' I-table : loading=' loading ' border : data=' dataList ' : columns=' columns list ' stripe size=' small '/I-table/div script src=' http : vue/axios . min . js '/script script src=' http : vue/vue . min . js '/script script src=' http : iview/iview . min。这是要呈现的数据及其描述：

{'status' : 1，' total' : 233，' items' : [{'id' : 1，' PID' : 3，' PRJNAME':' 2018-001 '，//items number无法编辑。//项目名称' PRJTYPE': '基础设施'文本输入框，//项目类型' JSUNIT': '投资公司'下拉选项，//施工公司' FLOW_TYPE_CODE':'A02 '文本输入框，//流程分类下拉选项，以代码形式与数据库交互' DATE_START': '2018-12-1 '，//选择' DATE_END': '2019-12-1 ' 为了方便起见，在utils的最后一行添加了$http(通常使用angularjs，所以习惯上使用\$http)

vue . prototype . utils=utils window。$http=axioseditTable.js :

varvm=new vue({ El : ' # edittablectrl '，data : function(){ return { load : true，//table datalist 3360[]的数据源，//columns list :[]，///添加编辑状态和保存状态，用于操作数据以避免干扰原始数据呈现cl