Vue動態組件表格的實現代碼
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>
到此這篇關於Vue動態組件 表格的文章就介紹到這瞭,更多相關Vue動態組件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!