排课算法iview的表格⾃定义_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平⽅⽶", //建设内容 多⾏输⼊框
还有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;
$('').then(function(res) {
self.dataList = res.data.Items;
self.loading = false;
});
},
},
created: function() {
}
});
地窖囚禁少女
* @name columnsList (浏览器 渲染的列)
* @author catkin
* @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',
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
}, {
title: '开⼯时间',
titleHtml: '开⼯时间 ',
key: 'DATE_START',
//这⾥在后⾯处理的时候会分割成['month','yyyy-MM']的数组，分别代表iview的DatePicker组件选择⽇期的格式与数据库传过来时页⾯显⽰的格式
date: 'month_yyyy-MM',
editable: true
}, {梦幻之声
align: 'center',
title: '竣⼯时间',
titleHtml: '竣⼯时间 ',
key: 'DATE_END',
date: 'month_yyyy-MM',
editable: true
}, {
align: 'center',
title: '建设内容',
titleHtml: '建设内容 ',
key: 'CONTENT',
input: 'textarea',
editable: true
}, {
align: 'center',
title: '总投资(万元)',
titleHtml: '总投资
(万元) ',
key: 'INVEST_ALL',
input: 'number',
editable: true
}, {
title: '操作',
align: 'center',
width: 150,
key: 'handle',
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议