通过配置 crud.js 和修改 index.vue，以及使用公共组件 card，实现了在 Vue 项目中对 CRUD 数据进行展示和弹窗展示的功能。

配置crud.js

      {
        key: 'score',
        title: '学生成绩',
        form: { disabled: true },
        rowSlot: true,
        width: 150,
      },

使用 rowSlot: true 可以开启插槽自定义展示内容。

      {
        key: 'type_language',
        title: '语言种类',
        data: vm.dictionary('student_type_language'),
        disabled: true,
        form: { disabled: false },
        type: 'select',
        dict: { data: vm.dictionary('student_type_language') },
        search: { disabled: false, component: { props: { clearable: true } } }
      },

如果不想在列表中展示某一项，可以设置 disabled: true，然后在弹窗中展示。
如果返回的值是枚举项需要前端转换，需要在配置中添加一个 data 字段。

index.vue配置

      <template slot="scoreSlot" slot-scope="scope">
        <div>
          <template>
            <card :title="'学生入学成绩'" Label="学科" Value="成绩" :obj="scope.row" :columns="columns"
              :customKey="['score_chinese', 'score_math', 'score_english', 'score_physics', 'score_chemistry', 'score_biology', 'score_history', 'score_geography', 'score_politics', 'score_art']"
              :key="scope.index" />
          </template>
        </div>
      </template>
      

:title=“‘’ 弹窗标题
Label=”" 弹窗列表第一列标题 不传默认是 -
Value=“” 弹窗列表第二列标题 不传默认是 -
:columns=“columns” 这个是获取crud的columns 下面有说明
customKey=“[]” 这个很重要，定义配置这个是在弹窗列表里面展示的内容，直接crud配置里面的key写在里面就可以
:key="scope.index"固定写法

import card from '../../../components/card/index.vue' //引入公共组件

  data() {
    return {
      columns: null // crud 行配置
    }
  },

  created() {
    crudOptions(this).then(res => {
      this.columns = res.columns
    })
  },
  
// created生命周期里面获取 crud的columns 也就是咱们手写的配置

公共组件card

card 组件路径在 src/components/card 下。
通过点击按钮触发弹窗显示，展示相应的内容。
可以根据传入的参数动态展示数据内容，实现定制化展示效果。

<template>
    <div>
        <!-- 点击按钮显示对话框 -->
        <el-button type="text" @click="dialogVisible = true">{{ '查看' + title }}</el-button>
        <el-dialog :title="title" :visible.sync="dialogVisible" width="40%">
            <el-table :data="get()" style="width: 100%">
                <!-- 表格列：标签 -->
                <el-table-column :label="Label" prop="lable"></el-table-column>
                <!-- 表格列：数值 -->
                <el-table-column :label="Value" prop="value">
                    <template slot-scope="scope">
                        <span v-if="Array.isArray(scope.row.value)">
                            <!-- 如果是图片，则显示图片 -->
                            <template v-if="isImage(scope.row.value)">
                                <img v-for="(url, index) in scope.row.value" :key="index" :src="url"
                                    style="max-width: 150px; max-height: 150px; margin-right: 10px;">
                            </template>
                            <!-- 如果不是图片，则显示文本 -->
                            <template v-else>
                                <span>{{ scope.row.value }}</span>
                            </template>
                        </span>
                        <span v-else>
                            {{ scope.row.value }}
                        </span>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 对话框底部按钮 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogVisible: false
        };
    },
    props: {
        Label: {
            type: String,
            default: '-'
        },
        Value: {
            type: String,
            default: '-'
        },
        title: {
            type: String,
            default: '弹出'
        },
        obj: {
            type: Object,
            default: function () {
                return {};
            },
        },
        columns: {
            type: Array,
            default: function () {
                return [];
            },
        },
        customKey: {
            type: Array,
            default: function () {
                return [];
            },
        },
    },
    created() {
        // console.log(this.columns);
    },
    methods: {
        // 判断给定的URL是否为图片格式
        isImage(urls) {
            const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif'];
            for (const url of urls) {
                for (const ext of imageExtensions) {
                    if (url.toLowerCase().endsWith(ext)) {
                        return true;
                    }
                }
            }
            return false;
        },
        // 获取表格数据
        get() {
            // 获取数据
            const arr = []
            if (this.columns.length > 0 && this.customKey.length > 0) {
                // 查找匹配的列和自定义key
                // 遍历 crud的全部配置
                this.columns.find(item => {
                    // 遍历 你想展示部配置
                    this.customKey.find(element => {
                        // 对比一下找到对应的crud的配置
                        if (item.key === element) {
                            arr.push({
                                lable: item.title,
                                value: item.data && item.data.length > 0 ? this.set(item.data, this.obj[item.key]) : this.obj[item.key]
                                // 这里说一下我用了一个三目 刚才我们上面说的如果有枚举项的话 前端需要在crud里面配置data 然后这里自动转换枚举项。
                            })
                        }
                    })
                })
            }
            return arr
        },
        // 根据key在obj中查找对应的值并返回对应的label
        set(obj, key) {
            const foundItem = obj.find(item => item.value == key);
            return foundItem ? foundItem.label : '-';
        },
    }
};
</script>

<style></style>