这篇文章主要介绍了解决iview多表头动态更改列元素发生的错误的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一
这篇文章主要介绍了解决iview多表头动态更改列元素发生的错误的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
解决iview 'You may have an infinite update loop in watcher with expression "columns"'
解决方案
单表头是可以动态变化不需要增添什么东西
多表头目前iview尚不能动态变化,会报错You may have an infinite update loop in watcher with expression "columns"
解决方法是GitHub大神提供的:需要修改iview.js源码
将iview.js中
columns: {
handler: function handler() {
var colsWithId = this.makeColumnsId(this.columns);
his.allColumns = (0, _util.getAllColumns)(colsWithId);
this.cloneColumns = this.makeColumns(colsWithId);
this.columnRows = this.makeColumnRows(false, colsWithId);
this.leftFixedColumnRows = this.makeColumnRows('left', colsWithId);
this.rightFixedColumnRows = this.makeColumnRows('right', colsWithId);
this.rebuildData = this.makeDataWithSortAndFilter();
this.handleResize();
},
deep: true
},
修改为
columns: {
handler: function handler() {
//[Fix Bug]You may have an infinite update loop in watcher with expression "columns"
var tempClonedColumns = (0, _assist.deepCopy)(this.columns);
var colsWithId = this.makeColumnsId(tempClonedColumns);
//[Fix Bug End]
this.allColumns = (0, _util.getAllColumns)(colsWithId);
this.cloneColumns = this.makeColumns(colsWithId);
this.columnRows = this.makeColumnRows(false, colsWithId);
this.leftFixedColumnRows = this.makeColumnRows('left', colsWithId);
this.rightFixedColumnRows = this.makeColumnRows('right', colsWithId);
this.rebuildData = this.makeDataWithSortAndFilter();
this.handleResize();
},
deep: true
},
demo
<template>
<div>
单表头:
<Table :columns="columns1" @on-row-click="onRowClick" :data="data1"></Table>
多表头:
<Table :columns="columns12" @on-row-click="onRowClick2" :data="data1" border height="500"></Table>
</div>
</template>
<script>
export default {
data() {
return {
columns1: [
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
key: 'address'
}
],
data1: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park',
date: '2016-10-01'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02'
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
}
],
columns12: [{
title: 'Name',
align:'center',
children: [{
title: 'nickName',
key: 'name',
},
{
title: 'realName',
key: 'name'
}
]
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
key: 'address'
}
],
}
},
methods: {
onRowClick() {
if('City'!==this.columns1[this.columns1.length-1].title) {
this.columns1.splice(this.columns1.length, 0, {
title: 'City',
key: 'address'
})
}
},
onRowClick2() {
if('City'!==this.columns12[this.columns12.length-1].title) {
this.columns12.splice(this.columns12.length, 0, {
title: 'City',
key: 'address'
})
}
}
},
}
</script>
感谢你能够认真阅读完这篇文章,希望小编分享的“解决iview多表头动态更改列元素发生的错误的方法”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网VUE频道,更多相关知识等着你来学习!
--结束END--
本文标题: 解决iview多表头动态更改列元素发生的错误的方法
本文链接: https://www.lsjlt.com/news/73150.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
一口价域名售卖能注册吗?域名是网站的标识,简短且易于记忆,为在线用户提供了访问我们网站的简单路径。一口价是在域名交易中一种常见的模式,而这种通常是针对已经被注册的域名转售给其他人的一种方式。
一口价域名买卖的过程通常包括以下几个步骤:
1.寻找:买家需要在域名售卖平台上找到心仪的一口价域名。平台通常会为每个可售的域名提供详细的描述,包括价格、年龄、流
443px" 443px) https://www.west.cn/docs/wp-content/uploads/2024/04/SEO图片294.jpg https://www.west.cn/docs/wp-content/uploads/2024/04/SEO图片294-768x413.jpg 域名售卖 域名一口价售卖 游戏音频 赋值/切片 框架优势 评估指南 项目规模 安全指南 Osprey 游戏分析 游戏调试 游戏图形 游戏物理 开源库
0