vue.js|vue3+antd实现table中点击具体某一列展示弹窗 typescript|前端

需求，点击table内的具体一行的某一列，出现弹窗，展示JSON数据第一步：给a-table元素内添加属性

:customRow="rowClick"

第二步： 【vue.js|vue3+antd实现table中点击具体某一列展示弹窗】根据定义的函数名，编写ts部分的内容；
分析：主要为两个方面：

获取到行的参数后将数据存储为JSON格式
确定点击的为具体的某一列然后展示该列的该行的字段

实现：

整体逻辑不复杂，主要是找到确定列的参数，根据event.target.cellIndex确定鼠标点击的第几列，然后根据这个参数判断自己需要点击哪一列进行弹窗显示
需要注意的点是对JSON数组赋值之前先将数据清空，否则会出现脏数据

params.length = 0;

="ts"> import { defineComponent, ref } from 'vue'; export default defineComponent({ setup() { const visible = ref(false); // JSON格式的参数信息 let params = reactive([]) const showModal = () => { visible.value = https://www.it610.com/article/true; }; const handleOk = (e: MouseEvent) => { visible.value = https://www.it610.com/article/false; }; // record为整行的数据，需要具体哪一列根据字段名取 const rowClick = (record, index) => { return { onClick: (event) => { // 判断点击的列数为4的时候展示弹窗 if (event.target.cellIndex == 4) { visible.value = https://www.it610.com/article/true; // 将JSON数组清空 params.length = 0; params.push(JSON.parse(record.params)) } } } }; return { visible, showModal, handleOk, rowClick， }; }, });