Vue动态组件表格的实现解析

//这里是HTML内容 这里通过下面的引入框架结构把数据源传到框架中 还有匹配项


// 引入结构组件
import myCard from "./components/card";

// 注册组件
components: { myCard },
     
 data() {
    return {
        // 这里定义数据列表
      configList: [
          // 这里是数据有源
          {
          text: "111",
          img: "/02.jpg",
          tap: "标签1",
          switch: true,
          button: "按钮1",
        },
      ],
       // 这里定义匹配项
      configData: [
      {
          table: "货币",
          porp: "text",
          name: "MyText",
        },
        {
          table: "图片",
          porp: "img",
          name: "Myimg",
        },
        {
          table: "标签",
          porp: "tap",
          name: "tag",
        },
        {
          table: "滑动开关",
          porp: "switch",
          name: "Btn",
          funName: (row) => {
            this.mySwitch(row);
          },
        },
        {
          table: "按钮",
          porp: "button",
          name: "Mybtn",
          // 如果组件中需要动态绑定事件 在这里设置
          funName: (row) => {
            this.myBtn(row);
          },
        },
      ]
    }
 ]

    // 这里接受数据组件传递过来的数据
    
      
        // 这里进行循环渲染数据
      
        
         // 动态组件 这里可以进行标签 按钮 图片等 的别的组件进行循环渲染到表格中
        
      
    
  

// 这里引用自己封装的动态组件
import Myimg from "@/components/toConfigure/img.vue";
import tag from "@/components/toConfigure/tag.vue";
import Btn from "@/components/toConfigure/switch.vue";
import MyText from "@/components/toConfigure/text.vue";
import Mybtn from "@/components/toConfigure/button.vue";

// 进行注册组件
components: {
    Myimg,
    tag,
    Btn,
    MyText,
    Mybtn,
  },
// 这里进行判断每个按钮时候有点击事件 没有为空  
methods: {
    fun(funName, row) {
      if (funName) {
        funName(row);
      }
    },
  },

// 这里接受传过来的数据
 props: {
    configData: {
      type: Array,
    },
    configList: {
      type: Array,
    },
  },