vue3+antd实现table点击具体某一列展示弹窗

需求，点击table内的具体一行的某一列，出现弹窗，展示JSON数据

第一步：

给a-table元素内添加属性

:customRow="rowClick"

<template>
  <div>
	// 表格
    <a-table
      bordered
      :data-source="dataSource"
      :columns="columns"
      :customRow="rowClick"
    />
   // 弹窗
   <a-modal v-model:visible="visible" title="参数" @ok="handleOk">
      <div v-for="items in params" style="white-space: nowrap;">
        <pre style="margin-left: 45px">{{ items }}</pre>
      </div>
    </a-modal>
  </div>
</template>

第二步：

根据定义的函数名，编写ts部分的内容；

分析：主要为两个方面：

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

实现：

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

params.length = 0;

<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const visible = ref<boolean>(false);
	 // JSON格式的参数信息
    let params = reactive([])
    const showModal = () => {
      visible.value = true;
    };

    const handleOk = (e: MouseEvent) => {
      visible.value = false;
    };
    // record为整行的数据，需要具体哪一列根据字段名取
	const rowClick = (record, index) => {
      return {
        onClick: (event) => {
        // 判断点击的列数为4的时候展示弹窗
          if (event.target.cellIndex == 4) {
            visible.value = true;
            // 将JSON数组清空
            params.length = 0;
            params.push(JSON.parse(record.params))
          }
        }
      }
    };
    return {
      visible,
      showModal,
      handleOk,
      rowClick，
    };
  },
});
</script>

这篇好文章是转载于：学新通技术网