antdv 动态修改a-table表格组件中的样式
<script>
import { reactive, toRefs, getCurrentInstance, onMounted } from "vue";
const fingerprintColumns = [
{
title: "标签",
dataIndex: "label",
align: "center",
},
{
title: "指纹特征",
dataIndex: "characteristic",
align: "center",
},
{
title: "K",
dataIndex: "kValue",
/**
* 自定义表格body中的单元格 加上这个配置
* 如果是自定义表头header的话 就加上这 slots: { title: "headerCell" }
* 主要区别在于 表头slots对象key是 title 其他单元格slots对象key是 customRender
* */
slots: { customRender: "kValue" },
align: "center",
},
{
title: "Cr",
dataIndex: "crValue",
slots: { customRender: "crValue" },
align: "center",
},
{
title: "Fe",
dataIndex: "feValue",
slots: { customRender: "feValue" },
align: "center",
},
{
title: "CO",
dataIndex: "coValue",
slots: { customRender: "coValue" },
align: "center",
},
{
title: "Ni",
dataIndex: "niValue",
slots: { customRender: "niValue" },
align: "center",
},
{
title: "Cu",
dataIndex: "cuValue",
slots: { customRender: "cuValue" },
align: "center",
},
{
title: "Zn",
dataIndex: "znValue",
slots: { customRender: "znValue" },
align: "center",
},
{
title: "Mn",
dataIndex: "mnValue",
slots: { customRender: "mnValue" },
align: "center",
},
{
title: "Ba",
dataIndex: "baValue",
slots: { customRender: "baValue" },
align: "center",
},
{
title: "Ti",
dataIndex: "tiValue",
slots: { customRender: "tiValue" },
align: "center",
},
{
title: "Pb",
dataIndex: "pbValue",
slots: { customRender: "pbValue" },
align: "center",
},
{
title: "Mg²⁺",
dataIndex: "Mg²⁺Value",
slots: { customRender: "Mg²⁺Value" },
align: "center",
},
];
export default {
name: "text",
setup() {
const { proxy } = getCurrentInstance();
const data = reactive({
fingerprintColumns,
fingerprintList: [],
sticky: true, // 固定表头
scrollTable: { y: 300 }, // 表格滚动配置
});
const getFingerprintList = () => {
/*
这里是动态设置表格的高度 这些是在项目中使用到的 这里并不用理会 只需要给个高度配置就可以了
let contentBox = ("content-box")[0]?.clientHeight;
let menuBox = ("ant-menu-overflow")[0]?.clientHeight;
let tabelHeaderBox = ("ant-table-thead")[0]?.clientHeight;
= {
y: contentBox - menuBox - tabelHeaderBox - 60,
};
*/
// apifox mock表格数据
fetch("http://127.0.0.1:4523/mock/1200396/visualization/pmf/fingerprintList")
.then((res) => ())
.then((result) => {
((item) => {
// 对表格中除第一 第二列以外的其他列中的值进行修约
let { characteristic, label, ...newList } = item;
let keyList = Object.keys(newList);
((itm) => {
item[itm] = parseFloat(item[itm]).toFixed(2);
});
});
= ;
});
};
const handleColor = (value) => {
let number = +value;
let startColor = null;
let endColor = null;
let color = "";
// 根据值的大小匹配对应的颜色值
if (number >= 0 && number <= 0.5) {
startColor = { red: 118, green: 185, blue: 37 };
endColor = { red: 255, green: 106, blue: 59 };
color = getColorOfWeight(0, 0.5, startColor, endColor, number);
} else {
if (number > 1) number = 1;
startColor = { red: 255, green: 106, blue: 59 };
endColor = { red: 119, green: 25, blue: 27 };
color = getColorOfWeight(0.5, 1, startColor, endColor, number);
}
return color;
};
// 动态获取渐变颜色
const getColorOfWeight = (minNum, maxNum, colorStart, colorend, number) => {
const colorR = (( - ) * (number - minNum)) / (maxNum - minNum) + ;
const colorG = (( - ) * (number - minNum)) / (maxNum - minNum) + ;
const colorB = (( - ) * (number - minNum)) / (maxNum - minNum) + ;
const color = `rgb(${parseInt(colorR).toString()},${parseInt(colorG).toString()},${parseInt(colorB).toString()})`;
return color;
};
onMounted(() => {
getFingerprintList();
});
return {
...toRefs(data),
handleColor,
};
},
};
</script>