Vue组件

数据源

//这里是HTML内容 这里通过下面的引入框架结构把数据源传到框架中 还有匹配项 <Mytable :configList="configList" :configData="configData"></Mytable>  // 引入结构组件 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);           },         },       ]     }  ]

 框架结构组件

<div>     // 这里接受数据组件传递过来的数据     <el-table :data="configList">       <!-- 文字表格区间 -->         // 这里进行循环渲染数据       <el-table-column         align="center"         v-for="(item, index) in configData"         :key="index"         :label="item.table"       >         <!-- 组件 -->          // 动态组件 这里可以进行标签 按钮 图片等 的别的组件进行循环渲染到表格中         <template slot-scope="scope">           <component             :is="item.name"             :value="scope.row"             // 把每一项有点击事件进行传参             @parentFun="fun(item.funName, scope.row)"           ></component>         </template>       </el-table-column>     </el-table>   </div>   // 这里引用自己封装的动态组件 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,     },   },

这里我自己封装了几个组件

按钮组件

<template>     // 这里是按钮   <el-button round @click="btn">{{ value.button }}</el-button> </template>  <script> export default { // 接受组件传过来的值   props: {     value: {       type: Object,     },   },  // 这里进行绑定动态点击事件   methods: {     btn() {        // 这里接受传参       this.$emit("parentFun");     },   }, }; </script>  <style></style>

图片组件

<template>   <div>     <el-image       style="width: 100px; height: 100px"       :src="Myimg"        // 使用时候把这条注释删除 这个属性是点击图片放大 不需要可以删除       :preview-src-list="[Myimg]"     ></el-image>   </div> </template>  <script> export default {   props: {     value: {       type: Object,     },   },   computed: {     Myimg() {       if (this.value.img.length > 0) {           // "@/assets/images" 这个是图片的根路径 加上 传递过来的数据中图片的名字         return require("@/assets/images" + this.value.img);       } else {         return;       }     },   }, }; </script>  <style></style>

 滑动开关

<template>   <div>     <el-switch       v-if="this.value.switch !== undefined"       v-model="value.switch"       active-color="#13ce66"       inactive-color="#ff4949"       @change="switchClick"     ></el-switch>   </div> </template>  <script> export default {   props: {     value: {       type: Object,     },   },   methods: {     switchClick() {       // 事件分发       this.$emit("parentFun", this.value);     },   },   mounted() {     // console.log(this.value.button);   }, }; </script>  <style></style>

tap组件

<template>   <div>     <el-tag v-if="value.tap.length > 0">{{ value.tap }}</el-tag>   </div> </template>  <script> export default {   props: {     value: {       type: Object,     },   }, }; </script>  <style></style>

text组件

<template>   <div>     {{ value.text }}   </div> </template>  <script> export default {   props: {     value: {       type: Object,     },   }, }; </script>  <style></style>