Open fncheng opened 2 years ago
form报错 TypeError: Cannot read properties of undefined (reading '$options')
原因是 <el-form-item>
没有写在 <el-form>
内部
解决办法:
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属性');
};
错位问题实际上是表头最右侧多出了一个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属性");
};
配合computed使用
computed: {
pickerOptions() {
return {
disabledDate: (time) => time.getTime() >= moment(this.formData.nextVisitDate).format('x')
}
}
},
Message({
message: string,
type: 'success' | 'warning' | 'error',
showClose: boolean
})
el-input
el-input 组件 autocomplete属性不生效的问题
原因:
el-input组件需要添加name属性
el-input限制数字
通过内联
oninput="value=value.replace(/[^\d]/g, '')"
来实现