1.自己构建必选图标符号，使用:before

&:before {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}

2.el-table里面的tooltip文字无法选中的解决方案

把 user-select:none 这个属性进行去除

3.react 中的 this 用 that变量获取的策略和时机

在 react 的箭头函数里面用普通 function 的话也需要像 vue 中一样，把 this 提前用变量获取一下

4.el-checkbox不用group的情况下，值的动态改变策略

首先明确：checked 属性无法动态更新

可以用checked设置复选框初始是否被选中，后期不能通过修改checked值改变复选框选中状态，也不能通过点击复选框修改checked的值。

看其源码可以看到，checked没有被监听，所以其值的改变，组件不会被重新渲染，这里的checked是element-ui组件重新封装后的属性，与原生input复选框的checked属性不同。

解决方案

所以我们必须给每个 checkbox 设置一个 status（相当于有多少个 checkbox 就有多少个对应的状态变量），以标志这个 checkbox 是否应该被选中（动态操控选中情况）

<el-checkbox
  @change="handleChecked(obj)"
  v-model="obj.status"
  :disabled="disabled && !(selectData === obj.productNo)"
  :checked="selectData === obj.productNo"
></el-checkbox>

handleChecked(val) {
  if (this.disabled) { //如果是不可选中状态下的
    this.disabled = false;
    this.selectData = null;
    this.$emit("getData", {});
    for (const obj of this.shopListRight) {
      // 给每个对象的内部对象数组设置'status'属性为 null 或者 false，即不会选中
      obj.productPriceList.forEach(innerObj => {
        this.$set(innerObj, "status", null); //响应式地更新对象的值
      });
    }
  } else {
    this.disabled = true;
    this.selectData = val.productNo;
    this.$emit("getData", val);
  }
}

5.在父组件中触发子组件的函数

1.ref 策略

获取 ref 对象，然后直接去调用这个子组件的函数

缺点：ref 不能重名，否则直接失败，对于动态创建的多个子组件，很难动态去获取和操作 ref 对象！

2.watch 策略

给动态的多个组件每个都传一个 props 变量，子组件中进行监听，一旦变量值发生变化，然后就进行相关的函数调用！——> 非常好的解决方法，这样每个组件都可以进行相应的变化

6.element-ui 给el-select下拉框的el-option选项绑定点击事件

在el-select里可以写 @change 监视选中值的改变。

但是对于每个 el-option并没有相应的选中事件来直接用！

我只想在选中某个选项时执行操作，使用@change会使每次选中都进入方法，需要用if语句来判断，能不能直接在该el-option里写入 @click 呢？

在el-option里直接写@click发现没反应，改为使用 @click.native 即可以给el-option添加点击事件。

.native的含义

有时候我们想要给 子组件整体添加一个事件，而不是子组件内部的某个dom元素上添加事件，<a-my-test @click="childClick" ></a-my-test>,这样添加点击事件是不会触发的，因为在自定义组件上注册的事件触发的是组件自定义的事件，根本不是原生的dom事件，既然不是，当然不会触发喽！

写成@click.native原生点击事件，点击事件就可以触发了， .native修饰符就是用来注册元素的原生事件而不是组件自定义事件的

所以.native的作用就是在组件（原生 dom 元素不需要）上添加一个原生的事件

7.el-select回显数据的时候是 value 而不是显示label

今天在使用el-select回显数据的时候 出现回显option选项的value 而不是显示label的问题。以为是渲染的问题，试了很多方法如 this.$set() this.$forceUpdate() 等等都没有解决。

原因：

回显的value和选项value类型不同

form中v-model="form.seriesId"是字符串类型（因为我们都是给 form 的某个属性设置值，希望可以自动在页面上选择 select 的对应选项，但是很多时候只能显示value 值，而不是 label）

那是因为option中:value="item.id" 选项id是数字类型

解决方法：

:value="item.id" 改为 :value="item.id+''"（转换成字符串）

<el-form-item :label="系列" prop="seriesId">
  <el-select v-model="form.seriesId" value-key="id" >
    <el-option v-for="item in SeriesList" :key="item.id" :label="item.seriesName"
               :value="item.id+''"/>
  </el-select>
</el-form-item>