undefinedfix
Sign in

Element tree control custom node content

dharmik edited in Thu, 26 Jan 2023

Hello everyone, now there is a requirement: click the person in charge, the collaborator disappears. I use the custom control in element to write this function

<el-tree
  :props="addTasks.defaultProps"
  :load="loadNode"
  accordion
  lazy>
    <span class="custom-tree-node btn-none" slot-scope="    { node, data }">
    <span>{{ data.deptName }}</span>
    <span v-show="node.level === 2">
      <!-- 点击负责人 协作者消失 -->
      <!-- 点击协作者 负责人消失 -->
      <el-button
        type="text"
        size="mini"
        @click="() => onlyPeople(node, data)">
        +负责人
      </el-button>
      <el-button
        type="text"
        size="mini"
        v-show="addTasks.isCollaborators"
        @click="() => collaborators(data)">
        +协作者
      </el-button>  
    </span>
    </span>
</el-tree>
// 负责人
onlyPeople(node, data) {
  // TODO:
  const parent = node;
  console.log(parent, 'onlyPeople-node');
  console.log(data, 'onlyPeople-data');
  this.addTasks.isCollaborators = true;
},

If I write this in my method, I will hide all the BTNs under the child nodes of the same level. How can I realize that if I click a child node, the BTN under the child node will disappear?

1 Replies
gregg_itx
commented on Thu, 26 Jan 2023

You should place the iscollaborators attribute on the corresponding node, not on an external variable, because in this way, all your nodes share the same variable, resulting in the modification of one node and the change of all other nodes.