需求 页面使用ant表格 根据数据动态合并行 且数据动态渲染各种样式
{
title: "数据标题",
align: "center",
width: 110,
dataIndex: "studyImportant",
//自定义表头 需删除title 且插槽写为title
scopedSlots: { title: "title" }
customRender: (text, row) => {
if (row.courseType === "a" || row.courseType === "c") { //判断是否渲染
return { attrs: { colSpan: 0 } }; //不渲染时返回一个attrs{colSpan 为0时不渲染}
} else {
let listDataSplit = row.knowledgeContents.split(";"); //将返回字符串转换为数组
var listData = new Array();//新建数组
//如果渲染的需要动态图片 可以将数据搞成数组对象
for (let item in listDataSplit) {
//循环写标签 需要判断是写if
listData.push(<a-menu-item key="x">{listDataSplit[item]}</a-menu-item>);
}
//引入图片 图片需要动态渲染时写为对象
var img = require("../../assets/images/image.png");
return {
//这里同样可以写合并或者不合并
children: (
//children内要用{}写定义的数据
//不可以写:v-if 或者:v-for
<div class="stuimp_Box">
<span>{listData[0]} </span>
<a-dropdown
getPopupContainer={triggerNode => {
return triggerNode.parentNode || document.body;
}}
trigger="['click']"
placement="bottomRight"
>
<a class="ant-dropdown-link">
<img src={img} alt="" class="more" />
</a>
<a-menu slot="overlay">{listData}</a-menu>
</a-dropdown>
</div>
)
};
}
}
},
表格行事件监听
data里
rowClick: record => {
return {
on: {
// 事件
click: event => {
console.log(record, "行案件");
if (this.disabled) {
if (record.resources == "ALL") {
this.selected = [];
menuList.map(item => {
if (item.children) {
this.selected.push(item.auth);
item.children.map(cont => this.selected.push(cont.auth));
} else {
this.selected.push(item.auth);
}
});
console.log(this.selected);
} else {
this.selected = record.resources.split(";");
}
} // 点击行
}
}
};
},
html里
<a-table :customRow="rowClick"/>
<!--官网 https://www.antdv.com/components/table-cn/-->
<a-table :customRow={(record) => {
return {
props: {
xxx... //属性
},
on: { // 事件
click: (event) => {}, // 点击行
dblclick: (event) => {},
contextmenu: (event) => {},
mouseenter: (event) => {}, // 鼠标移入行
mouseleave: (event) => {}
},
};
)}
customHeaderRow={(column) => {
return {
on: {
click: () => {}, // 点击表头行
}
};
)}
/>