//這里是HTML內(nèi)容 這里通過(guò)下面的引入框架結(jié)構(gòu)把數(shù)據(jù)源傳到框架中 還有匹配項(xiàng)
<Mytable :configList="configList" :configData="configData"></Mytable>

// 引入結(jié)構(gòu)組件
import myCard from "./components/card";

// 注冊(cè)組件
components: { myCard },
     
 data() {
    return {
        // 這里定義數(shù)據(jù)列表
      configList: [
          // 這里是數(shù)據(jù)有源
          {
          text: "111",
          img: "/02.jpg",
          tap: "標(biāo)簽1",
          switch: true,
          button: "按鈕1",
        },
      ],
       // 這里定義匹配項(xiàng)
      configData: [
      {
          table: "貨幣",
          porp: "text",
          name: "MyText",
        },
        {
          table: "圖片",
          porp: "img",
          name: "Myimg",
        },
        {
          table: "標(biāo)簽",
          porp: "tap",
          name: "tag",
        },
        {
          table: "滑動(dòng)開(kāi)關(guān)",
          porp: "switch",
          name: "Btn",
          funName: (row) => {
            this.mySwitch(row);
          },
        },
        {
          table: "按鈕",
          porp: "button",
          name: "Mybtn",
          // 如果組件中需要?jiǎng)討B(tài)綁定事件 在這里設(shè)置
          funName: (row) => {
            this.myBtn(row);
          },
        },
      ]
    }
 ]

<div>
    // 這里接受數(shù)據(jù)組件傳遞過(guò)來(lái)的數(shù)據(jù)
    <el-table :data="configList">
      <!-- 文字表格區(qū)間 -->
        // 這里進(jìn)行循環(huán)渲染數(shù)據(jù)
      <el-table-column
        align="center"
        v-for="(item, index) in configData"
        :key="index"
        :label="item.table"
      >
        <!-- 組件 -->
         // 動(dòng)態(tài)組件 這里可以進(jìn)行標(biāo)簽 按鈕 圖片等 的別的組件進(jìn)行循環(huán)渲染到表格中
        <template slot-scope="scope">
          <component
            :is="item.name"
            :value="scope.row"
            // 把每一項(xiàng)有點(diǎn)擊事件進(jìn)行傳參
            @parentFun="fun(item.funName, scope.row)"
          ></component>
        </template>
      </el-table-column>
    </el-table>
  </div>

// 這里引用自己封裝的動(dòng)態(tài)組件
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";

// 進(jìn)行注冊(cè)組件
components: {
    Myimg,
    tag,
    Btn,
    MyText,
    Mybtn,
  },
// 這里進(jìn)行判斷每個(gè)按鈕時(shí)候有點(diǎn)擊事件 沒(méi)有為空  
methods: {
    fun(funName, row) {
      if (funName) {
        funName(row);
      }
    },
  },

// 這里接受傳過(guò)來(lái)的數(shù)據(jù)
 props: {
    configData: {
      type: Array,
    },
    configList: {
      type: Array,
    },
  },

<template>
    // 這里是按鈕
  <el-button round @click="btn">{{ value.button }}</el-button>
</template>

<script>
export default {
// 接受組件傳過(guò)來(lái)的值
  props: {
    value: {
      type: Object,
    },
  },
 // 這里進(jìn)行綁定動(dòng)態(tài)點(diǎn)擊事件
  methods: {
    btn() {
       // 這里接受傳參
      this.$emit("parentFun");
    },
  },
};
</script>

<style></style>

<template>
  <div>
    <el-image
      style="width: 100px; height: 100px"
      :src="Myimg"
       // 使用時(shí)候把這條注釋刪除 這個(gè)屬性是點(diǎn)擊圖片放大 不需要可以刪除
      :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" 這個(gè)是圖片的根路徑 加上 傳遞過(guò)來(lái)的數(shù)據(jù)中圖片的名字
        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() {
      // 事件分發(fā)
      this.$emit("parentFun", this.value);
    },
  },
  mounted() {
    // console.log(this.value.button);
  },
};
</script>

<style></style>

<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>

<template>
  <div>
    {{ value.text }}
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Object,
    },
  },
};
</script>

<style></style>