ElementUI常见问题

[fncheng]

el-input

el-input 组件 autocomplete属性不生效的问题

<el-form ref="form" :model="form">
  <el-form-item>
    <el-input v-model="form.username" autocomplete="on" placeholder="Name"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button @click="onSubmit">Submit</el-button>
  </el-form-item>
</el-form>

原因：

el-input组件需要添加name属性

el-input限制数字

通过内联oninput="value=value.replace(/[^\d]/g, '')"来实现

<el-input
  v-model="number"
  oninput="value=value.replace(/[^\d]/g, '')"
  style="width: 80px"
>
</el-input>

[fncheng]

el-form

form报错 TypeError: Cannot read properties of undefined (reading '$options')
原因是 <el-form-item> 没有写在 <el-form> 内部

[fncheng]

el-table

table fixed right 错位问题

issues

解决办法：

this.$refs.table.doLayout()

表格内部滚动条

mounted() {
    this.$nextTick(() => {
      const el = document.querySelector(
        ".el-table__body-wrapper.is-scrolling-none"
      )
      const { top } = el.getBoundingClientRect()
      el.setAttribute("style", `max-height: calc(100vh - ${top}px - 50px)`)
    })
  },

本质上是给表格的body部分设置一个height或者max-height，然后允许其滚动

题外话，在Antd中实现

export default function App() {
  const node = useRef<HTMLDivElement>(null);
  const [scrollY, setScrollY] = useState("");
  useEffect(() => {
    const el = node.current?.querySelector("div.ant-table-body");
    const top = el?.getBoundingClientRect().top;
    const height = `calc(100vh - ${top}px - 66px)`;
    setScrollY(height);
  }, []);

  return (
    <div className="App" ref={node}>
      <div style={{ height: "32px" }}>
        <Button>123</Button>
        <span>{Math.random()}</span>
        <button className="my-ant-btn">123</button>
      </div>
      <ProTable
        scroll={{ y: scrollY }}
      />
      {...}
    </div>
  );
}

这里需要注意的是div.ant-table-body 只有给组件设置scroll属性时才会出现。

然后发现了一个问题，当数据量较少时表格下方会呈现大片的空白

原因是ProTable的scroll属性只给div.ant-table-body添加了max-height属性，却没有min-height属性

所以修改一下上面的代码

const node = useRef<HTMLDivElement>(null);
  const [scrollY, setScrollY] = useState('');
  useEffect(() => {
    const el = node.current?.querySelector('div.ant-table-body');
    const { top, bottom }: DOMRect = el!.getBoundingClientRect();
    const height = `calc(100vh - ${top}px - 66px)`;
    const oldStyle = el?.getAttribute('style');
    const newStyle = `min-height: ${height}`;
    el?.setAttribute('style', `${oldStyle} ${newStyle}`);
    setScrollY(height);
  }, []);

最后再封装一下

import { RefObject } from 'react';

/**
 * 给ProTable的body部分设置滚动条
 * @param {number} options.extraHeight 表格body底部到可视区域的距离（默认为 70）
 * @param {RefObject} options.ref  ProTable组件ref
 * @returns {string} 返回表格的垂直滚动高度
 * 
 * @throws {Error} 如果无法计算出垂直滚动高度，可能是ProTable组件未设置scroll属性
 */
export const getTableScroll = ({
  extraHeight = 70,
  ref,
}: {
  extraHeight?: number;
  ref: RefObject<HTMLDivElement>;
}) => {
  const el = ref.current?.querySelector('div.ant-table-body');
  console.log('el: ', el);
  if (el) {
    const { top }: DOMRect = el!.getBoundingClientRect();
    const height = `calc(100vh - ${top + extraHeight}px)`;
    const oldStyle = el?.getAttribute('style');
    const newStyle = `min-height: ${height};overflow-y: auto`;
    el?.setAttribute('style', `${oldStyle} ${newStyle}`);
    return height;
  } else throw new Error('ProTable必须设置scroll属性');
};

当Table设置fixed后出现错位问题

错位问题实际上是表头最右侧多出了一个th元素导致的

当给Table设置scroll={{ x: '100%', y: '100%' }}时反而不会出现错位

经测试设置overflow-y: scroll 可以解决错位问题并且保持表格原貌

给表格设置滚动条并解决错位问题

/**
 * 给ProTable的body部分设置滚动条
 * @param {number} options.extraHeight 表格body底部到可视区域的距离（默认为 70）
 * @param {RefObject} options.ref  ProTable组件ref
 * @returns {string} 返回表格的垂直滚动高度
 */
export const getTableScrollY = ({
    extraHeight = 70,
    ref,
}: {
    extraHeight?: number;
    ref: RefObject<HTMLDivElement>;
}): string => {
    const tSearch: HTMLElement | null = ref.current?.querySelector(
        "div.ant-pro-table-search"
    );
    /**
     * scrollElement 用于解决表格fixed时出现错位的问题
     * 给表格y轴设置overflow-y: scroll时就不会出现错位
     */
    const scrollElement: HTMLElement | null =
        ref.current?.querySelector(
            ".ant-table-cell-fix-right.ant-table-cell-fix-right-first"
        );

    const tBody = ref.current?.querySelector("div.ant-table-body");
    if (tSearch) {
        tSearch.style.marginBottom = "10px";
    }
    if (tBody) {
        const { top }: DOMRect = tBody.getBoundingClientRect();
        const height = `calc(100vh - ${top + extraHeight}px)`;
        const oldStyle = tBody?.getAttribute("style");
        const newStyle = `min-height: ${height};overflow-y: ${
            scrollElement ? "scroll" : "auto"
        }`;
        tBody?.setAttribute("style", `${oldStyle} ${newStyle}`);
        return height;
    } else throw new Error("Table必须设置scroll属性");
};

[fncheng]

el-date-picker

pickerOptions disabledDate设置禁用时间

配合computed使用

computed: {
    pickerOptions() {
      return {
        disabledDate: (time) => time.getTime() >= moment(this.formData.nextVisitDate).format('x')
      }
    }
  },

[fncheng]

Message消息提示

Message({
  message: string,
  type: 'success' | 'warning' | 'error',
  showClose: boolean
})

[cMing1997]

el-table

table fixed right 错位问题

issues

解决办法：

this.$refs.table.doLayout()

这个错位的问题，只有这个doLayout 的解决办法嘛？有更高性能的嘛？