vue可填写表格_vue+iview 实现可编辑表格

先简单说明一下,这个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:

可编辑表格

首页没什么说的,都是基本的架子. 这是需要渲染的数据及其说明:

{

"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的表头 列: '资金来源'

* 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: '项目名称 ',

key: 'PRJNAME',

editable: true

}, {

align: 'center',

title: '项目分类',

titleHtml: '项目分类 ',

key: 'PRJTYPE',

option: ['产业项目', '基础设施', '民生项目', '住宅项目'],

editable: true

}, {

align: 'center',

title: '建设单位',

titleHtml: '建设单位 ',

key: 'JSUNIT',

editable: true

}, {

align: 'center',

title: '流程分类',

titleHtml: '流程分类 ',

key: 'FLOW_TYPE_CODE',

option: [{

value: 'A01',

label: '建筑-出让'

}, {

value: 'A02',

label: '建筑-划拨'

}, {

value: 'B01',

label: '市政-绿化'

}, {

value: 'B02',

label: '市政-管线'

}],

editable: true

}, {

align: 'center',

title: '开工时间',

titleHtml: '开工时间 ',

key: 'DATE_START',

//这里在后面处理的时候会分割成['month','yyyy-MM']的数组,分别代表iview的DatePicker组件选择日期的格式与数据库传过来时页面显示的格式

date: 'month_yyyy-MM',

editable: true

}, {

align: 'center',

title: '竣工时间',

titleHtml: '竣工时间 ',

key: 'DATE_END',