vue+iview实现可编辑表格的示例代码_vue制作简易表单

50 浏览量更新于2023-03-03 评论收藏 117KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

vue+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:

<!DOCTYPE html>

<head>

<title>可编辑表格</title>

</head>

<i-table :loading="loading" border :data="dataList" :columns="columnsList" stripe size="small"></i-table>

</div>

</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 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',

editable: true

}, {

align: 'center',

title: '竣工时间',

titleHtml: '竣工时间 <i class="ivu-icon ivu-icon-edit"></i>',

key: 'DATE_END',

date: 'month_yyyy-MM',

editable: true

}, {

align: 'center',

title: '建设内容',

titleHtml: '建设内容 <i class="ivu-icon ivu-icon-edit"></i>',

key: 'CONTENT',

input: 'textarea',

editable: true

}, {

align: 'center',

title: '总投资(万元)',

titleHtml: '总投资<br />(万元) <i class="ivu-icon ivu-icon-edit"></i>',

key: 'INVEST_ALL',

input: 'number',

editable: true

}, {

title: '操作',

align: 'center',

width: 150,

key: 'handle',

handle: ['edit', 'delete']

}]

//...

此时页面应该已经可以渲染出表格了

既然要编辑数据,并且我的需求是整行整行的编辑,而编辑的同时就会同步更新数据,那么问题来了

vue中, 数据更新,视图会随之更新. 想象一下,我在输入框中属于一个值,触发了数据更新,接着又触发了视图更新,那么

我每次输入时,这个input都会失焦,毫无用户体验. 所以我们把可编辑的动态内容用cloneDataList渲染,静态显示的用

dataList渲染

//...

self.dataList = res.data.Items;

// 简单的深拷贝,虽然map会返回新数组,但是数组元素也是引用类型,不能直接改,所以先深拷贝一份

self.cloneDataList = JSON.parse(JSON.stringify(self.dataList)).map(function(item) {

// 给每行添加一个编辑状态与保存状态, 默认都是false

item.editting = false;

item.saving = false;

return item;

});

//...

接下来,我们要根据columnsList做一次循环判断,根据相应的key写出不同的render函数

//全局添加

//根据value值找出数组中的对象元素

function findObjectInOption(value) {

return function(item) {

return item.value === value;

剩余10页未读，继续阅读

weixin_38637983

粉丝: 8
资源: 907

会员权益专享

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

评论0

会员权益专享

最新资源

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

评论0

vue实现简单表格组件实例详解

vue实现表格数据的增删改查

edittable插件，可编辑表格示例

使用handsontable在Vue项目中实现可编辑的数据表格

在Vue3中实现定时刷新数据表格

vue+iview实现省市二级联动

vue+iview 删除Table表格指定的某一行数据

vue+iview 实现父组件在子组件表格中添加日期选择器

vue+iview 在data数据中为表格添加日期选择器

vue+iview 在data函数中为表格添加日期选择器

vue+iview 在表格中添加日期选择器

用vue + iview 写一个详情页面

vue+iview table表格最多显示10条，超出显示滚动条

用vue+iview框架写一个可以填写的表格

vue+iview 外部按钮删除Table表格通过复选框选中的某一行数据，未选中则按钮不可点击

vue+iview ui库table组件中添加日期选择器

vue + iview 循环数组到多选框

vue+iview ui库table组件中添加可选日期选择器和input输入框

vue3+iview点击Table表格高亮，再次点击取消高亮

vue+iview ui库table组件中添加日期选择器和input输入框

会员权益专享

最新资源