element-ui+vue开发中的小知识

最新推荐文章于 2024-04-27 11:01:24 发布

前端小菜机

最新推荐文章于 2024-04-27 11:01:24 发布

阅读量621

点赞数

文章标签： vue.js javascript elementui 1024程序员节

本文链接：https://blog.csdn.net/m0_59930878/article/details/126282321

版权

el-table

// 表格数据回显
this.pushServiceData.forEach((element) => {
  if (element.id === '581467208874485176') {
     (this.$refs.multipleTable as any).toggleRowSelection(element)
  }
})

el-table横向滚动条鼠标悬浮时样式修改（高度改变，颜色改变）

*:hover::-webkit-scrollbar {
  height: 12px !important;
}
*::-webkit-scrollbar-thumb:hover {
  background-color: #969696 !important;
}

el-table对某列渲染成按钮，比如：

{
   label: '执行备注',
   minWidth: 100,
   align: 'center',
   'header-align': 'center',
   render: (h, { record }) => { // 渲染成按钮形式
      return h(
        'el-button',
           {
             props: { type: 'text' },
             on: {
                 click: () => that.beizhu(record)
              }
            },
         '查看'
       );
     }
}

el-checkbox

groupChange() {
    if (this.checked.length > 1) {
      this.checked.shift();
    }
  }
<el-checkbox-group v-model="checked" @change="groupChange">
</el-checkbox-group>

el-date-picker

// 日期多选后点击确定排序
change(val) {
    const newArr = val.sort(sortF)
    console.log(newArr)
}
function sortF(a, b) {
  return new Date(a).getTime() - new Date(b).getTime();
}

el-select

a.问题描述：主项目是使用的（react +antd），子项目使用的技术栈是（vue+element）,子项目的下拉框出现页面滚动但是对应的下拉框的位置固定，影响用户的使用和观感

想到了两个解决方案个人倾向于第二个

方案一： 'popper-append-to-body': false

此方案在我使用的时候感觉到的缺点：因为是配置化的页面，下拉框很可能配置在屏幕的最右测，如果下拉列表内容过长，会导致超过屏幕看不到内容，影响用户的观感。

方案二：在滚动屏幕时将下拉框给隐藏

// app.vue
import fakeClickOutSide from '@mixins/fackClickOutSide.js';
mixins: [fakeClickOutSide],
// 在mixins文件下新建文件fakeClickOutSide.js
let lock = true;
let el = null;
const MousedownEvent = new Event('mousedown', { bubbles: true });
const MouseupEvent = new Event('mouseup', { bubbles: true });
const fakeClickOutSide = () => {
  document.dispatchEvent(MousedownEvent);
  document.dispatchEvent(MouseupEvent);
  lock = true; // console.log('dispatchEvent');
};
const mousedownHandle = (e) => {
  const classList = e.target.classList;
  if (
    classList.contains('el-select__caret') ||
    classList.contains('el-input__inner')
  ) {
    lock = false;
    return;
  }
  if (lock) return;
  fakeClickOutSide();
};
const mousewheelHandle = (e) => {
  if (
    lock ||
    e.target.classList.contains('el-select-dropdown__item') ||
    e.target.parentNode.classList.contains('el-select-dropdown__item')
  )
    return;
  fakeClickOutSide();
};
const eventListener = (type) => {
  el[type + 'EventListener']('mousedown', mousedownHandle);
  window[type + 'EventListener']('mousewheel', mousewheelHandle);
  window[type + 'EventListener']('DOMMouseScroll', mousewheelHandle); // fireFox 3.5+
};
export default {
  mounted() {
    el = this.$root.$el;
    el.addFakeClickOutSideEventCount = el.addFakeClickOutSideEventCount || 0;
    !el.addFakeClickOutSideEventCount &&
      this.$nextTick(() => {
        eventListener('add');
      });
    el.addFakeClickOutSideEventCount += 1;
  },
  destroyed() {
    eventListener('remove');
    el.addFakeClickOutSideEventCount -= 1;
  }
};

解决npm包提供的错误index.d.ts文件

在tsconfig.json文件的compilerOptions中添加skipLibCheck: true