数据重复,前端提示错误
if (val) {
let res = this.dynamicTags.some(item => {
if (item.name === val) return true
})
if (res) {
this.msgError('该标签已经存在')
this.addVal = ''
} else {
this.dynamicTags.push({'name': val, arr: []})
this.addVal = ''
}
}
数组对象之间的对比
this.tagCfgList.forEach((el, index) => {
el.phraseTaggingDetails.map(phrase => {
if (words.find(word => word.id == phrase.id)) {
phrase.type = words.find(word => word.id == phrase.id).cfgId
phrase.colorName = `color-${this.colorKeySource[phrase.type].colorKey}`
}
})
})
过滤树(不实用)
filterMenu(menuList) {
return menuList.filter(item => {
return item.leaf == false
}).map(item => {
item = Object.assign({}, item)
if (item.children) {
item.children = this.filterMenu(item.children)
}
return item
})
}
同级数据转化为tree结构(来源若依框架)
handleTree(data, id, parentId, children) {
let config = {
id: id || 'id',
parentId: parentId || 'parentId',
childrenList: children || 'children'
};
var childrenListMap = {};
var nodeIds = {};
var tree = [];
for (let d of data) {
let parentId = d[config.parentId];
if (childrenListMap[parentId] == null) {
childrenListMap[parentId] = [];
}
nodeIds[d[config.id]] = d;
childrenListMap[parentId].push(d);
}
for (let d of data) {
let parentId = d[config.parentId];
if (nodeIds[parentId] == null) {
tree.push(d);
}
}
for (let t of tree) {
adaptToChildrenList(t);
}
function adaptToChildrenList(o) {
if (childrenListMap[o[config.id]] !== null) {
o[config.childrenList] = childrenListMap[o[config.id]];
}
if (o[config.childrenList]) {
for (let c of o[config.childrenList]) {
adaptToChildrenList(c);
}
}
}
return tree;
}
el-table点击整行展开
使用自带row-click,然后写入方法handleRowClick
<el-table
v-loading="loading"
:data="attributeCfgList"
row-key="id"
ref="menuTable"
@row-click="handleRowClick"
:tree-props="{children:'children',hasChildren: 'hasChildren'}">
</el-table>
methods:{
handleRowClick(row, column, event){
// 判断当前行是否有子集,若没有则结束处理
if(!row.children || row.children.length === 0) return ;
this.$refs.menuTable.toggleRowExpansion(row);
}
}
局部刷新组件
<template>
<el-table
:data="data"
:key="refresh"
>
...
</el-table>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
@Component({})
export default class extends Vue {
refresh= true
@Watch('data')
watchData() {
this.refresh= !this.refresh
}
}
</script>
————————————————
版权声明:本文为CSDN博主「worxfr」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/sinat_41883985/article/details/105239434
<template>
<el-table
v-if="refresh"
:data="data"
>
...
</el-table>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
@Component({})
export default class extends Vue {
refresh = true
// 监视data是否发生变化
@Watch('data')
watchData() {
// 移除组件
this.refresh = false
// this.$nextTick可实现在DOM 状态更新后,执行传入的方法。
this.$nextTick(() => {
// 重新渲染组件
this.refresh = true
})
}
}
</script>
————————————————
版权声明:本文为CSDN博主「worxfr」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/sinat_41883985/article/details/105239434
<template>
<button @click="reflush()">刷新当前组件</button>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component({})
export default class extends Vue {
reflush() {
this.$forceUpdate()
}
}
</script>
————————————————
版权声明:本文为CSDN博主「worxfr」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/sinat_41883985/article/details/105239434