1.el-tree 设置不可选中的结点

每个 node 都有一个 disabled 属性

<el-tree
	:style="{
                 alignItems: 'flex-start',
                 flexWrap: 'wrap',
                 float: 'left',
                 width: '51%'
         }"
	class="Tree_list flex_left"
	show-checkbox
	@check="checkAgoData"
	:data="dataSale"
	node-key="id"
	:default-checked-keys="defaultChecked"
	ref="firstTreeRef"
>
</el-tree>

watch: {
  disableList(newValue, oldValue) {
    console.log(newValue);
    this.toDisabled(this.dataSale, newValue);
    console.log(this.dataSale);
  }
},
methods:{
  toDisabled(data, disableList) {
    console.log("---------");
    console.log(disableList);
    console.log("---------");
    data.forEach(e => {
      if (e.children.length > 0) {
        if (disableList.indexOf(e.id) > -1) {
          e.disabled = true;
        }
        this.toDisabled(e.children, disableList); //递归的时候参数不能丢失
      } else {
        if (disableList.indexOf(e.id) > -1) {
          e.disabled = true;
        }
      }
    });
  },
}

失败的思路方法：

computed 和 watch 等都不行！

2.react 构建样式化组件相对于普通的 css 的优势？

React 构建样式化组件相对于普通的 CSS 有几个优势：

1. 组件化思维： React 的样式化组件鼓励开发者以组件化的方式构建用户界面。每个组件封装了自己的样式和行为，使代码更加模块化、可复用和易于维护。这种组件化思维使得开发者能够更好地管理和理解项目中的样式。
2. 局部作用域： 在 React 中，样式通常是与组件绑定的，可以将样式限制在组件的作用域内。这样一来，不同组件间的样式不会互相干扰，避免了全局 CSS 的潜在冲突问题。这种局部作用域使得样式的管理更加可靠和可控。
3. 组件状态响应： React 的样式可以与组件的状态和属性关联起来。通过使用状态或属性来控制样式，可以根据不同的应用场景或用户交互自动调整组件的样式，使得界面更加动态和交互式。
4. 动态样式： 基于 React 的样式化组件可以使用 JavaScript 的逻辑来动态地生成样式，从而可以实现更加复杂的样式逻辑。这种灵活性可以让你根据条件或用户输入来动态调整组件的外观。
5. 样式重用： React 的样式化组件鼓励样式的重用。你可以通过将样式作为 props 或类名传递给组件来实现不同样式的复用，这在构建类似但样式稍有差异的组件时特别有用。
6. CSS-in-JS： React 生态系统中还涌现了一些 CSS-in-JS 库（例如 styled-components、Emotion 等），它们允许你在 JavaScript 文件中直接编写样式。这样做的优势是可以将样式与组件紧密结合，提供更加直观和灵活的样式管理方式。

然而，值得指出的是，React 构建样式化组件并不是完全取代普通 CSS 的选择。在某些情况下，使用传统的 CSS 仍然是合理和有效的，特别是对于简单的静态页面或全局样式。选择合适的样式化方式还要考虑具体项目的需求、规模和团队的熟悉程度。

3.react 相对于 vue 的优势

react 可以在 js 中直接把一些请求返回的，构造好的数据传递给组件，都是放在一起的，逻辑清晰更加简便

vue 还要绑定到 data 中再通过 props 传递过去，当然还有一种思路就是使用 ref 去获取对象然后直接修改子组件的 data 值

react 生态完整

render props 可以实现动态渲染，vue 则比较难做到

4.css 的 font 属性

这段 CSS 代码表示为所有 <h2> 和 <a> 元素应用相同的样式：

h2, a {
  font: 18px/54px "微软雅黑";
}

这里的样式属性 font 包含了字体大小、行高和字体族（"微软雅黑"）。

• font-size: 18px: 设置字体大小为 18 像素。
• line-height: 54px: 设置行高为 54 像素，这里的行高是相对于字体大小的倍数。通常，行高是字体大小的约 1.5 倍，可以让文本看起来更加舒适和易读。
• font-family: "微软雅黑";: 设置字体族为 "微软雅黑"，即应用微软雅黑字体。

这个样式规则将影响所有的 <h2> 标签和 <a> 标签，并将它们的字体大小设置为 18 像素，行高设置为 54 像素，并使用 "微软雅黑" 字体族。如果页面中有其他 <h2> 和 <a> 元素，它们也会应用这个相同的样式。

5.data 可以直接用 props 的数据

this.即可！ 因为 props 在 data 后面