antdv &element-ui的坑

报错Warning: [antdv: Table] Each record in dataSource of table should have a unique key prop,
:rowKey=“(record,index)=>{return index}”

---

1.无法使用v-on监听element-ui中el-input的事件
原因： 封装了input，input不是根组件，加上.native即可，比如：v-on:keyup.enter.native
碰见v-on事件不执行的地方，都可以试试加.native

2.如果用了scoped，对组件样式修改，需要用穿透
/deep/或者>>>或者::v-deep

>>> .el-step__title{
    font-size 22px
    color: red

a、stylus的样式穿透 使用：（>>>）

外层类 >>> 想要修改的类名 {

要修改的样式

}

例：.wrapper >>> .el-card__header {

border-bottom: none
}

b、sass和less的样式穿透 使用：（/deep/）不生效可使用::v-deep

外层类 /deep/ 想要修改的类名 {
　　要修改的样式
}
例：.wrapper /deep/ .el-card__header {

border-bottom: none
}

c、通用样式穿透 使用：（::v-deep）（推荐使用此种方式）

::v-deep 想要修改的类名 {

要修改的样式

}

2.table表格组件展示不同状态显示不同颜色等情况的处理
解决方案：不适用prop属性直接展示，而是要在el-table-column中定义新组件template

3.时间选择器选择范围限制
3.1 单个输入框的
3.1.1 需求：设置选择今天及今天之后的日期
3.1.2 需求：设置选择今天及今天以前的日期
3.1.3 需求：设置选择今天之后的日期（不能选择当天时间） ----测试无用
3.1.4 需求：设置选择今天之前的日期（不能选择当天）----测试无用
3.1.5 需求：设置到今天为止90天的日期
3.2 两个输入框
3.2.1 限制结束日期不能大于开始日期 （element UI 中有关联日期选择器，此需求可用在项目中不使用关联日期选择期时使用）

4.Vue键盘回车事件
如果是原生的input，使用@keyup.enter就可以，若是使用了element-ui，则要加上native限制符，因为element-ui把input进行了封装，原事件就不起作用了，代码如下：

<input v-model="form.name" placehoder="昵称" @keyup.enter="submit">
<el-input v-model="form.name" placehoder="昵称" @keyup.enter.native="submit"></el-input>

5.el-container类似这种标签，可以直接当样式类名使用
<style scoped>
  .el-container{
  		>div{// 下级div}
  }
  >>>div{// 样式穿透}
</style>

5.容器高度100%设置，如果没有内容100%没反应，可以设置vh
.el-container {
height: 100vh;
}

或者动态获取高度

<template>
  <div>
    <el-container :style="defaultHeight">
      <el-header height="100px">Header</el-header>
      <el-container style="height: 100%;">
        <el-aside>Aside</el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      defaultHeight: {
        height: '',
      },
    }
  },
  methods: {
    //定义方法，获取高度减去头尾
    getHeight() {
      this.defaultHeight.height = window.innerHeight + 'px'
    },
  },
  created() {
    //页面创建时执行一次getHeight进行赋值，顺道绑定resize事件
    console.log('created')
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
  },
}
</script>
<style scoped>
.el-container {
  /* height: 100vh;s */
}
.el-aside {
  background-color: green;
  width: 500px;
}
.el-header {
  background-color: greenyellow;
  /* height: 300px; */
}
.el-main {
  background-color: antiquewhite;
}
</style>

6. el-form-item 用if来控制，有时错乱，解决办法加 :key=‘1’、 :key=‘2’
   参考：https://wenku.baidu.com/view/79bc3746551252d380eb6294dd88d0d233d43cd3?aggId=93762cee4328915f804d2b160b4e767f5acf8028&fr=catalogMain_graph_v10_recall%3Awk_recommend_main3&wkts=1690873979770&bdQuery=v-if+el-form-item%E4%B9%B1%E4%BA%86

7. el-radio校验规则不生效 prop
   data() {
   var validateRadio = (rule, value, callback) => {
   if (value) {
   // 当值为0的时候当做没选择
   if (value == 0) {
   callback(new Error(‘请选择审核状态’))
   } else {
   callback();
   }
   } else {
   callback(new Error(‘请选择审核状态’));
   }
   };

return{}

}

//表单校验
auditStatus: [{
validator: validateRadio,
trigger: ‘change’
}],