el-tree设置每行背景颜色

在Element UI的el-tree组件中，如果你想为每个节点的行设置背景颜色，你可以通过监听`node-key`的变化事件，然后根据节点的数据动态设置样式。这里有一个简单的例子：

<template>
  <el-tree
    :data="treeData"
    node-key="id" @node-key-change="onNodeKeyChange"
  ></el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [], // 树状数据数组
    };
  },
  methods: {
    onNodeKeyChange(node) {
      // 获取当前节点的索引
      const index = this.treeData.findIndex(item => item.id === node.key);

      // 设置背景颜色，这里假设你想根据节点的某个属性值来决定颜色
      this.treeData[index].style.backgroundColor = this.getColorForNode(node.data); // 调用你自定义的颜色计算函数

      // 更新视图
      this.$nextTick(() => {
        this.$refs.tree.render();
      });
    },

    // 你需要实现这个方法来根据节点数据返回背景颜色
    getColorForNode(data) {
      // 这里只是一个示例，你可以根据实际需求调整颜色策略
      if (data.status === 'active') {
        return '#c0ecee'; // 活跃状态背景色
      } else {
        return '#f5f5f5'; // 非活跃状态背景色
      }
    },
  },
};
</script>

在这个例子中，我们监听了`node-key-change`事件，当节点的唯一标识符发生变化时，我们获取到该节点在列表中的位置，并应用自定义的颜色。注意要用`$nextTick`确保DOM更新后再渲染。