Vue动态组件表格的实现代码_vue.js_

//这里是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, }, },