lov多選模式下,輸入框中的內容如果比較長的話可能會無法完整地顯示文字內容,這時候就希望在鼠標懸停時能有popover將完整的文字展示出來。
組件原本沒有提供這個功能,但是這難不倒冰雪聰明的我,讓我們來開動小腦瓜,使用一些奇奇怪怪的小方法來實現它。
const ds = (setLovTitle = () => {}) => ({
fields: [
{
name: 'fieldName',
label: '我是label',
type: 'object',
multiple: true,
lovCode: 'HELLO.MY_LOV_CODE',
},
],
events: {
update: ({ name }) => {
if (name === 'fieldName') {
setTimeout(() => {
setLovTitle(name);
}, 2000);
}
},
},
});
/**
* @description: 給多選lov內容添加懸浮title,要打開element面板分析一下dom結構,就能寫出來了
* @author: ChenJJ
* @param {String} id dom元素id
*/
setMultiLovTitle = (id) => {
const field = document.getElementById(id);
if (field) {
const father = field.parentNode;
if (father) {
const ul = father.parentNode;
if (ul) {
const divList = ul.getElementsByTagName('div');
if (divList) {
for (let i = 0; i < divList.length; i++) {
const content = divList[i].innerText;
divList[i].setAttribute('title', content);
}
}
}
}
}
};
<Form dataSet={this.ds}>
<Lov
name="fieldName"
id="fieldName"
// 只在onChange里面寫是不夠的,后面再打開modal框去改變內容時,是無法觸發(fā)這個的,但是可以寫在dataSet的events里面的update監(jiān)聽回調函函數里面。
onChange={this.setMultiLovTitle('fieldName')}
/>
</Form>