一些比较好的功能

271 阅读1分钟

数据重复,前端提示错误

      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);
    }
 }

局部刷新组件

转载至blog.csdn.net/sinat_41883…

<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