Data duplication, front-end error message

      if (val) {
        let res = this.dynamicTags.some(item= > {
          if (item.name === val) return true
        })
        if (res) {
          this.msgError('This tag already exists')
          this.addVal = ' '
        } else {
          this.dynamicTags.push({'name': val, arr: []})
          this.addVal = ' '}}Copy the code

Comparison between array objects

       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-The ${this.colorKeySource[phrase.type].colorKey}`}})})Copy the code

Filter tree (not practical)

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
      })
    }
Copy the code

Peer data is converted to a tree structure (source depending on the framework)

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 ofo[config.childrenList]) { adaptToChildrenList(c); }}}return tree;
    }
Copy the code

El-table click on the entire row to expand

Use native row-click, and then write the method handleRowClick

<el-table
    v-loading="loading"
    :data="attributeCfgList"
    row-key="id"
    ref="menuTable"
    @row-click="handleRowClick"
    :tree-props="{children:'children',hasChildren: 'hasChildren'}">
</el-table>
Copy the code

 methods:{
     handleRowClick(row, column, event){
      // Determine whether the current row has a subset, if not, end the processing
      if(! row.children || row.children.length ===0) return ;
      this.$refs.menuTable.toggleRowExpansion(row); }}Copy the code

Partial refresh component

Transfer to 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>———————————————— Copyright Notice: This article was originally written by CSDN blogger "Worxfr", following CC4.0By-sa copyright agreement, please attach the original source link and this statement. HTTPS://blog.csdn.net/sinat_41883985/article/details/105239434
Copy the code

<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
	
	// Monitor data for changes
	@Watch('data')
	watchData() {
		// Remove the component
        this.refresh = false
        // this.$nextTick implements the method passed in when the DOM status is updated.
        this.$nextTick(() = > {
        	// Re-render the component
            this.refresh = true}}})</script>———————————————— Copyright Notice: This article was originally written by CSDN blogger "Worxfr", following CC4.0By-sa copyright agreement, please attach the original source link and this statement. HTTPS://blog.csdn.net/sinat_41883985/article/details/105239434
Copy the code

<template>
	<button @click="reflush()">Refresh the current component</button>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
	
@Component({})
export default class extends Vue {
	reflush() {
	    this.$forceUpdate()
	}
}
</script>———————————————— Copyright Notice: This article was originally written by CSDN blogger "Worxfr", following CC4.0By-sa copyright agreement, please attach the original source link and this statement. HTTPS://blog.csdn.net/sinat_41883985/article/details/105239434
Copy the code