没有合适的资源?快使用搜索试试~ 我知道了~
首页vue+iview 实现可编辑表格的示例代码
vue+iview 实现可编辑表格的示例代码
4 下载量 177 浏览量
更新于2023-05-04
收藏 170KB PDF 举报
先简单说明一下,这个Demo引入的vue,iview的方式是标签引入的,没有用到webpack之类的构建工具… 毕竟公司还在用angularjs+jq. 这也是我第一次写文章,大家看看思路就行了,要是有大佬指点指点就更好了 话不多说,先来个效果图 我们再看下极为简单的目录结构 IViewEditTable ## vue+iview 实现的可编辑表格 └── index.html ## 首页 └── js └── editTable.js ## 首页JS └── ivew ## iview相关 └── vue ├── axios.min.js ## a
资源详情
资源推荐
![](https://csdnimg.cn/release/download_crawler_static/13657660/bg1.jpg)
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:
<!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 nofollow" rel="stylesheet" />
</head>
![](https://csdnimg.cn/release/download_crawler_static/13657660/bg2.jpg)
<body style="background-color: #f0f3f4;">
<div id="editTableCtrl">
<i-table :loading="loading" border :data="dataList" :columns="columnsList" stripe size="small"></i-table>
</div>
<script src="vue/axios.min.js"></script>
<script src="vue/vue.min.js"></script>
<script src="iview/iview.min.js"></script>
<script src="vue/util.js"></script>
<script src="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
* {
![](https://csdnimg.cn/release/download_crawler_static/13657660/bg3.jpg)
* titleHtml : 渲染带有html的表头 列: '资金<em class="blue" style="color:red">来源</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 class="ivu-icon ivu-icon-edit"></i>',
key: 'PRJNAME',
editable: true
}, {
align: 'center',
title: '项目分类',
titleHtml: '项目分类 <i class="ivu-icon ivu-icon-edit"></i>',
key: 'PRJTYPE',
option: ['产业项目', '基础设施', '民生项目', '住宅项目'],
editable: true
}, {
align: 'center',
title: '建设单位',
titleHtml: '建设单位 <i class="ivu-icon ivu-icon-edit"></i>',
key: 'JSUNIT',
editable: true
}, {
align: 'center',
title: '流程分类',
titleHtml: '流程分类 <i class="ivu-icon ivu-icon-edit"></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 class="ivu-icon ivu-icon-edit"></i>',
key: 'DATE_START',
//这里在后面处理的时候会分割成['month','yyyy-MM']的数组,分别代表iview的DatePicker组件选择日期的格式与数据库传过来
时页面显示的格式
date: 'month_yyyy-MM',
剩余11页未读,继续阅读
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/default.jpg!1)
weixin_38546024
- 粉丝: 6
- 资源: 939
上传资源 快速赚钱
我的内容管理 收起
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
会员权益专享
最新资源
- VMP技术解析:Handle块优化与壳模板初始化
- C++ Primer 第四版更新:现代编程风格与标准库
- 计算机系统基础实验:缓冲区溢出攻击(Lab3)
- 中国结算网上业务平台:证券登记操作详解与常见问题
- FPGA驱动的五子棋博弈系统:加速与创新娱乐体验
- 多旋翼飞行器定点位置控制器设计实验
- 基于流量预测与潮汐效应的动态载频优化策略
- SQL练习:查询分析与高级操作
- 海底数据中心散热优化:从MATLAB到动态模拟
- 移动应用作业:MyDiaryBook - Google Material Design 日记APP
- Linux提权技术详解:从内核漏洞到Sudo配置错误
- 93分钟快速入门 LaTeX:从入门到实践
- 5G测试新挑战与罗德与施瓦茨解决方案
- EAS系统性能优化与故障诊断指南
- Java并发编程:JUC核心概念解析与应用
- 数据结构实验报告:基于不同存储结构的线性表和树实现
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
安全验证
文档复制为VIP权益,开通VIP直接复制
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)