实现vue表格中参数的数据渲染

效果图

1.添加编号点击事件

<!-- 添加点击事件 -->
            <span
              v-if="column.dataIndex === 'codeTableNumber'"
              @click="handleCodeTableClick(record)"
              style="cursor: pointer; color: blue;"
            >
<!-- 后台数据中的码表参数 -->
              {{ record.codeTableNumber }}
            </span>

将其定义在页面显示的表格标签中

2.vue组件中加入modal标签

<!-- 码表编号查询 -->
  <a-modal v-model:visible="modalVisible" >
    <template #title>
    <div class="modal-title">
<!-- 动态解构码表编号 -->
      {{ modalTitle }}
    </div>
  </template>
<!-- 定义表格 -->
    <a-table :columns="modalColumns" :dataSource="modalDataSource" rowKey="id" :pagination="false">
      <template #bodyCell="{ text, column }">
      
      </template>
    </a-table>
<!-- 取消模态框按钮 -->
    <template #footer></template>
  </a-modal>

3.定义列表

// 模态框中的表格列定义
const modalColumns = [
  { title: '码表取值', dataIndex: 'codeValueValue' },
  { title: '码表名称', dataIndex: 'codeValueName' },
  { title: '码表含义', dataIndex: 'codeValueDesc' ,width: '50%',},
  // 添加其他需要显示的码表信息列
];

注意：根据实际需求进行修改

4.实现点击查询逻辑

// 控制模态框显示
const modalVisible = ref(false);
// 存储当前选中的码表数据
const selectedCodeTable = ref(null);
// 存储当前选中码表编号对应的数据
const modalDataSource = ref();
// 处理码表点击事件
// 点击事件处理函数 handleCodeTableClick 中设置 codeTableNumber
const handleCodeTableClick = (record) => {
  // 设置当前选中的码表数据
  selectedCodeTable.value = record;
  // 根据点击的码表编号从 tableData 中找到对应的数据
//codeValueList中包含当前表格数据中的三个参数值
  modalDataSource.value = record.codeValueList;
  // 设置模态框标题中的码表编号
  modalTitle.value = '人员性别码表 ' + record.codeTableNumber;
  //显示模态框
  modalVisible.value = true;
};

// 模态框标题的动态渲染
const modalTitle = ref('');

注意：可根据实际需求进行修改