element-ui

一、注意

二、实现效果

三、问题

1.el-date-picker绑定的要是一个字符串，报错： dateStr.match is not a function ；不能直接new Date().getFullYear() 得到一个Number,得String()；

2.el-input-number 默认会把null转为0，解决：没值写成undefined

3.el-dialog组件

1.初始化(不一定非要父子组件传参visible)(但是我感觉容易不销毁)

<el-dialog :visible.sync="visible" width="50%">
   
  </el-dialog>
  init(){
      this.visible = true
  }
  
  
  父组件中：	
  <dialog-item  ref='dialog' v-if='dialogVisible'>
  </ dialog-item>
  
  this.$refs.dialogVisible.init()

2.嵌套el-dialog 里面的dialog用 append-to-body 成为全屏弹框

3.常用dialog封装

子组件：

<!-- 辨识危险源 弹框 -->
<template>
  <div v-if="visible">
    <el-dialog
      title="辨识危险源"
      :visible.sync="visible"
      width="50%"
      destroy-on-close
      :before-close="handleClose"
      @close="$emit('closeDialog')"
    >
      <div class="add-dialog-content">
      </div>
      <span slot="footer" class="dialog-footer">
     
        <div class="btn cancel-button" @click="$emit('closeDialog')">取 消</div>
      </span>
    </el-dialog>
   
  </div>
</template>

<script>
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
    },
  },
  components: { },
  data() {
    //这里存放数据
    return {
      visible: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    dialogVisible: {
      handler(v) {
        this.visible = v;
      },
  },
  //方法集合
  methods: {
    handleClose(done) {
      this.$emit("closeDialog");
      done();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="scss">
::v-deep .el-dialog {}
</style>

父组件：

  <add-dialog
      v-if="dialogVisible && riskLevelList"
      ref="addDialog"
      :dialogVisible="dialogVisible"
      :riskLevelList="riskLevelList"
      @closeDialog="closeDialog"
    />


    closeLevelDialog(isChange, riskLevelId) {
        this.riskLevelList = null;
        this.levelDialogVisible = false;
    },

4.el-input .stop失效

vue element上面 .stop失效（vue好像也不能用原生），则再el-input外再套一层div\span元素，@click.stop 即可<span v-else @click.stop>
          <el-input
            :id="Math.random()"
            v-model="scope.row.titleName"
            @blur.stop="rowUpdate(scope)"
          ></el-input>
        </span>

5.日期范围

1.限制日期选择范围

https://www.cnblogs.com/wuqilang/p/15654978.html

限制区间30天：

pickerMinDate: '',
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.pickerMinDate = minDate.getTime()
          if (maxDate) this.pickerMinDate = ''
        },
        disabledDate: (time) => {
          if (this.pickerMinDate !== '') {
            const one = 30 * 24 * 3600 * 1000
            const minTime = this.pickerMinDate - one
            const maxTime = this.pickerMinDate + one
            return time.getTime() < minTime || time.getTime() > maxTime
          }
        }
      }

使用 eg：

//数据中心-能耗小时统计
let pickerMinDate = "";
export const tableOption = (list) => {
  return {
    border: true, //边框
    stripe: false, //表格条纹
    card: false, //卡片表格
    index: true, //序号
    indexLabel: "序号", //序号名称
    selection: false, //是否多选
    searchShow: true, //页面初次加载是否显示搜索框
    searchMenuPosition: "center", //搜索操作按钮的位置
    searchMenuSpan: 6, //搜索操作按钮的位置
    searchSlot: true, //自定义列搜索
    menu: false, //是否显示操作菜单栏
    menuWidth: 100,
    // header: false,
    // size:'mini',  //控件大小 medium/small/mini
    align: "center", //列的对其方式
    refreshBtn: true, //刷新按钮
    header: true,
    addBtn: false, //添加按钮
    editBtn: false, //修改按钮
    viewBtn: false, //查看按钮
    delBtn: false, //删除按钮
    columnBtn: true, //表格右侧操作列显隐的按钮
    cellBtn: false, //是否行编辑按钮
    printBtn: false, //即可开启打印功能
    excelBtn: false, //导出exce按钮
    dateBtn: false, //日期范围搜索功能
    searchShowBtn: false, //搜索显隐按钮
    searchLabelWidth: 80,
    labelWidth: 130,
    props: {
      label: "label",
      value: "value",
    },
    column: [
      {
        label: "统计日期",
        prop: "statisticsDateArray",
        type: "input",
        searchType: "daterange",
        format: "yyyy-MM-dd",
        valueFormat: "yyyy-MM-dd",
        popperClass: "time-picker",
        search: true,
        startPlaceholder: "开始日期",
        endPlaceholder: "结束日期",
        rules: [
          { required: true, message: "统计日期不能为空", trigger: "blur" },
        ],
        hide: true,
        clearable: false,
        type: "date",
        pickerOptions: {
          onPick: ({ maxDate, minDate }) => {
            pickerMinDate = minDate.getTime();
            if (maxDate) pickerMinDate = "";
          },
          disabledDate: (time) => {
            if (pickerMinDate !== "") {
              // 只能选择62天
              const one = 62 * 24 * 3600 * 1000;
              const minTime = pickerMinDate - one;
              const maxTime = pickerMinDate + one;
              return time.getTime() < minTime || time.getTime() > maxTime;
            }
          },
        },
        // searchSlot: true,
      },
    ],
  };
};

限制区间30天，不能大于今日：

pickerMinDate: '',
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.pickerMinDate = minDate.getTime()
          if (maxDate) this.pickerMinDate = ''
        },
        disabledDate: (time) => {
          if (this.pickerMinDate !== '') {
            const one = 30 * 24 * 3600 * 1000
            let minTime = this.pickerMinDate - one
            let maxTime = this.pickerMinDate + one
            if (maxTime > new Date()) maxTime = new Date() // 限制不能选择今天之后的日期
            return time.getTime() < minTime || time.getTime() > maxTime
          }
          return time.getTime() > Date.now()
        }
      }

限制区间30天，不能小于今日：

pickerMinDate: '',
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.pickerMinDate = minDate.getTime()
          if (maxDate) this.pickerMinDate = ''
        },
        disabledDate: (time) => {
          if (this.pickerMinDate !== '') {
            const one = 30 * 24 * 3600 * 1000
            let minTime = this.pickerMinDate - one
            let maxTime = this.pickerMinDate + one
            if (minTime < new Date()) minTime = new Date() // 限制不能选择今天之前的日期
            return time.getTime() < minTime || time.getTime() > maxTime
          }
          return time.getTime() < Date.now() - 8.64e7 // 加上 - 8.64e7 就可以选择今天
        }
      }

选择今天及之前的日期：

   pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() > Date.now()
        }
      }

选择今天之前的日期：

  pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() > Date.now() - 8.64e7
        }
      }

6.el-tree手动设置高亮

el-tree设置高亮节点：  
            <el-tree
              ref="riskPointIdTreeRef"
              default-expand-all
              :data="riskPointIdTree"
              v-model="form.riskPointId"
              placeholder="请选择关联风险点"
              node-key="riskPointId"
              @node-click="handleNodeClick"
            ></el-tree>


        this.$nextTick(() => {
          this.$refs.riskPointIdTreeRef.setCurrentNode(
            this.riskPointIdList.find(
              (v) => v.riskPointId == this.form.riskPointId
            )
          );
        });

7.el-table

1.滚动条 || fixed固定列导致的表格错位

公共样式中：

// 解决overflow-y拖拽表格滚动条，错位问题
.no-last-td-avue .el-table__header-wrapper {
  padding-right: 10px !important; // 滚动条宽度
}
// .no-last-td-avue .el-table__fixed-header-wrapper {
//  padding-right: 10px !important;
// }

// 解决左右 对不齐 的情况 (表格有fixed固定列)
// el-table 左右有列固定时，fixed为left和right时，行未对齐解决办法
// * 产生原因： el-table底部有滚动条，固定列底部没有滚动条
// * 解决办法： 在el-table的表格中设置padding-bottom的内边距跟滚动条等高
.no-last-td-avue .el-table__fixed {
  height: calc(100% - 10px) !important;
}

.no-last-td-avue .el-table__fixed-body-wrapper {
  height: calc(100% - 83px) !important; // 83px:他的top值，即表头的高
}
// 下面的会导致横向滚动条在fixed列拉不住 （没有横向滚动条可用）
// .no-last-td-avue .el-table__fixed-body-wrapper .el-table__body {
//   padding-bottom: 10px; // 6px为横向滚动条高度
// }