图例：
1.首先是正常的引用组件，这块没啥好讲的
<a-table
:columns="columns"
:data-source="dataList"
bordered
size="middle"
:scroll="{y: 800}"
:pagination="false"
/>二：如果只需要添加点击事件，可以通过以下代码实现，自定义可参考下部分代码：
customRender: (text, row, index) => {
let _this = this;
const child = _this.$createElement("a", {
domProps: {
innerHTML: text,
},
on: {
click: function () {
_this.customHandleDetail(row.name, "A01");
},
},
});
let obj = {
children: child,
attrs: {},
};
return obj;
},
2.主要是columns的相关配置，其中dataList是我们接口获取到的扁平数据，其中点击事件customHandleDetail（）为自定义点击事件，获取传入recode.name和自身的key，可以根据自己需要进行传参
columns: [
//图例：第五列的配置，包含多个子集
{
title: "名称5",
align: "center",
children: [
{
title: "0人",
dataIndex: "B01",
key: "B01",
width: 50,
align: "center",
customRender: (text, row, index) => {
let _this = this;
const child = _this.$createElement("a", {
domProps: {
innerHTML: text,
},
on: {
click: function () {
_this.customHandleDetail(row.name, "B01");
},
},
});
let obj = {
children: child,
attrs: {},
};
return obj;
},
},
{
title: "1-2人",
dataIndex: "B02",
key: "B02",
width: 50,
align: "center",
customRender: (text, row, index) => {
let _this = this;
//这里需要做点击事件，所以使用a标签，不需要的可以使用div或者p
const child = _this.$createElement("a", {
domProps: {
innerHTML: text,
},
//点击事件以及传参
on: {
click: function () {
_this.customHandleDetail(row.name, "B02");
},
},
});
let obj = {
children: child,
attrs: {},
};
return obj;
},
},
{
title: "3-5人",
dataIndex: "B03",
key: "B03",
width: 50,
align: "center",
customRender: (text, row, index) => {
let _this = this;
const child = _this.$createElement("a", {
domProps: {
innerHTML: text,
},
on: {
click: function () {
_this.customHandleDetail(row.name, "B03");
},
},
});
let obj = {
children: child,
attrs: {},
};
return obj;
},
},
{
title: "6-9人",
dataIndex: "B04",
key: "B04",
width: 50,
align: "center",
customRender: (text, row, index) => {
let _this = this;
const child = _this.$createElement("a", {
domProps: {
innerHTML: text,
},
on: {
click: function () {
_this.customHandleDetail(row.name, "B04");
},
},
});
let obj = {
children: child,
attrs: {},
};
return obj;
},
},
{
title: "10人及以上",
dataIndex: "B05",
key: "B05",
width: 50,
align: "center",
customRender: (text, row, index) => {
let _this = this;
const child = _this.$createElement("a", {
domProps: {
innerHTML: text,
},
on: {
click: function () {
_this.customHandleDetail(row.name, "B05");
},
},
});
let obj = {
children: child,
attrs: {},
};
return obj;
},
},
],
},
//图例：第七、第八列配置
{
title: "名称6",
dataIndex: "C01",
key: "C01",
width: 50,
align: "center",
customRender: (text, record) => {
const dynamicContents = [];
//一个单元格内需要展示的字段：如果值存在，则渲染，如果不存在则不渲染，进行过滤循环后展
//示
// 根据需要添加更多字段，
const fieldNames = ["C011", "C012", "C013", "C014", "C015", "C016"];
fieldNames.forEach((fieldName) => {
if (record[fieldName]) {
dynamicContents.push(<p>{record[fieldName]}</p>);
}
});
const hasDynamicContents = dynamicContents.length > 0;
//如果上面数组都没有值或者都为null，则展示默认的值：C01
if (!hasDynamicContents) {
return <div class="center-content">{text}</div>;
}
return (
<div class="center-content">
{dynamicContents.map((content, index) => (
<div key={index}>
{content}
{index < dynamicContents.length - 1 && <hr class="center-content" />}
</div>
))}
</div>
);
},
},//图例：最后一列的配置
{
title: "测试1",
dataIndex: "E15",
width: 50,
key: "E15",
align: "center",
customRender: (text, row, index) => {
let _this = this;
const child = _this.$createElement("a", {
domProps: {
innerHTML: text,
},
on: {
click: function () {
_this.customHandleDetail(row.name, "E15");
},
},
});
let obj = {
children: child,
attrs: {},
};
return obj;
},
},
],
},
{
title: "名称10",
align: "center",
children: [
{
title: "测试1",
dataIndex: "F01",
key: "F01",
width: 50,
align: "center",
customRender: (text, row, index) => {
let _this = this;
const child = _this.$createElement("a", {
domProps: {
innerHTML: text,
//若需要设置字体颜色，可以在这里加入style
},
on: {
click: function () {
_this.customHandleDetail(row.name, "F01");
},
},
});
let obj = {
children: child,
attrs: {},
};
return obj;
},
},
{
title: "测试1",
dataIndex: "F02",
key: "F02",
width: 50,
align: "center",
customRender: (text, row, index) => {
let _this = this;
const child = _this.$createElement("a", {
domProps: {
innerHTML: text,
},
on: {
click: function () {
_this.customHandleDetail(row.name, "F02");
},
},
});
let obj = {
children: child,
attrs: {},
};
return obj;
},
},
],
},
],
906
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
