Vue基于Element-ui實(shí)現(xiàn)表格彈窗組件
更新時(shí)間：2022年04月12日 11:30:21 作者：清虛桂意
這篇文章主要為大家詳細(xì)介紹了Vue基于Element-ui實(shí)現(xiàn)表格彈窗組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vue基于Element-ui實(shí)現(xiàn)表格彈窗組件的具體代碼，供大家參考，具體內(nèi)容如下
效果圖
使用方式
acTable1 () {
? this.$modalTable({
? ? title: "表格一",
? ? tableData: [{
? ? ? date: '2016-05-02',
? ? ? name: '王小虎',
? ? ? address: '上海市普陀區(qū)金沙江路 1518 弄'
? ? }, {
? ? ? date: '2016-05-04',
? ? ? name: '王小虎',
? ? ? address: '上海市普陀區(qū)金沙江路 1517 弄'
? ? }, {
? ? ? date: '2016-05-01',
? ? ? name: '王小虎',
? ? ? address: '上海市普陀區(qū)金沙江路 1519 弄'
? ? }, {
? ? ? date: '2016-05-03',
? ? ? name: '王小虎',
? ? ? address: '上海市普陀區(qū)金沙江路 1516 弄'
? ? }],
? ? tableColumn: [
? ? ? {
? ? ? ? prop: "date",
? ? ? ? label: "日期",
? ? ? ? width: "180"
? ? ? },
? ? ? {
? ? ? ? prop: "name",
? ? ? ? label: "姓名",
? ? ? },
? ? ? {
? ? ? ? prop: "address",
? ? ? ? label: "地址",
? ? ? }
? ? ]
? })
},
acTable2 () {
? this.$modalTable({
? ? title: "表格二",
? ? tableData: [],
? ? tableColumn: [
? ? ? {
? ? ? ? prop: "date",
? ? ? ? label: "日期",
? ? ? ? width: "180"
? ? ? },
? ? ? {
? ? ? ? prop: "name",
? ? ? ? label: "姓名",
? ? ? },
? ? ? {
? ? ? ? prop: "address",
? ? ? ? label: "地址",
? ? ? }
? ? ]
? })
},
acTable3 () {
? this.$modalTable({
? ? title: "表格三",
? ? tableData: [{
? ? ? date: '2016-05-02',
? ? ? name: '王小虎',
? ? ? address: '上海市普陀區(qū)金沙江路 1518 弄'
? ? }, {
? ? ? date: '2016-05-04',
? ? ? name: '王小虎',
? ? ? address: '上海市普陀區(qū)金沙江路 1517 弄'
? ? }, {
? ? ? date: '2016-05-01',
? ? ? name: '王小虎',
? ? ? address: '上海市普陀區(qū)金沙江路 1519 弄'
? ? }, {
? ? ? date: '2016-05-03',
? ? ? name: '王小虎',
? ? ? address: '上海市普陀區(qū)金沙江路 1516 弄'
? ? }],
? ? tableColumn: [
? ? ? {
? ? ? ? prop: "name",
? ? ? ? label: "姓名",
? ? ? },
? ? ? {
? ? ? ? prop: "date",
? ? ? ? label: "日期",
? ? ? },
? ? ? {
? ? ? ? prop: "address",
? ? ? ? label: "地址",
? ? ? }
? ? ]
? })
},1、創(chuàng)建modalTable.vue文件
將變量放在data中，正常開(kāi)發(fā)即可，后續(xù)會(huì)通過(guò)別的方式將數(shù)據(jù)傳入組件data中。
<template>
? <el-dialog ref="dialog"
? ? ? ? ? ? ?:title="title"
? ? ? ? ? ? ?:visible.sync="visible"
? ? ? ? ? ? ?width="30%"
? ? ? ? ? ? ?:before-close="beforeClose">
? ? <el-table :data="tableData"
? ? ? ? ? ? ? style="width: 100%">
? ? ? <el-table-column v-for="(item,index) in tableColumn"
? ? ? ? ? ? ? ? ? ? ? ?:key="index"
? ? ? ? ? ? ? ? ? ? ? ?:prop="item.prop"
? ? ? ? ? ? ? ? ? ? ? ?:label="item.label"
? ? ? ? ? ? ? ? ? ? ? ?:width="item.width">
? ? ? </el-table-column>
? ? </el-table>
? ? <span slot="footer"
? ? ? ? ? class="dialog-footer">
? ? ? <el-button @click="closeDialog">關(guān)閉</el-button>
? ? </span>
? </el-dialog>
</template>
<script>
export default {
? data () {
? ? return {
? ? ? visible: false,
? ? ? vmId: 0,
? ? ? title: "標(biāo)題",
? ? ? tableData: [],
? ? ? tableColumn: []
? ? };
? },
? methods: {
? ? beforeClose (done) {
? ? ? this.visible = false
? ? ? // 從DOM里將這個(gè)組件移除 ?
? ? ? // visible只是控制了顯示與隱藏 ?但是dom結(jié)構(gòu)中還是存在組件 ?為了避免消耗內(nèi)存必須銷(xiāo)毀組件
? ? ? // setTimeout(() => {
? ? ? // ? console.log("this.$el.parentNode", this.$el.parentNode)
? ? ? // ? console.log("this.$el", this.$el)
? ? ? // ? this.$el.parentNode.removeChild(this.$el)
? ? ? // }, 500)
? ? ? setTimeout(() => {
? ? ? ? if (typeof this.onClose === "function") {
? ? ? ? ? this.onClose(this.vmId)
? ? ? ? ? done()
? ? ? ? }
? ? ? }, 500);
? ? },
? ? closeDialog () {
? ? ? this.$refs.dialog.handleClose()
? ? }
? }
};
</script>
<style lang="less" scoped>
</style>2、創(chuàng)建modalTable.js文件
在組件中沒(méi)有props接收參數(shù)，那么如何給modalTable組件傳參，這就需要一個(gè)modalTable.js 文件去管理modalTable.vue組件。
import Vue from "vue";
const constructor = Vue.extend(require('./modalTable.vue').default)
let nId = 1
let instances = []
const ModalTable = (options) => {
? let id = 'table-' + nId++;
? options = options || {};
? console.log("options", options);
? // 重點(diǎn)：綁定關(guān)閉事件
? options.onClose = function (vmId) {
? ? ModalTable.close(vmId)
? }
? // 實(shí)列化
? const instance = new constructor({
? ? //重點(diǎn)：在這里將你傳過(guò)來(lái)的參數(shù)匹配到modalTable.vue組件的data
? ? data: {
? ? ? ...options,
? ? ? vmId: id
? ? }
? })
? console.log("instance", instance);
? instance.id = id;
? instance.$mount(); // 掛載但是并未插入dom，是一個(gè)完整的Vue實(shí)例
? document.body.appendChild(instance.$el) // 將dom插入body
? instance.visible = true //這里修改modalTable.vue數(shù)據(jù)中的visible,這樣modalTable組件就顯示出來(lái)
? instances.push(instance)
? return instance
};
ModalTable.close = function (vmId) {
? console.log("vmId", vmId)
? instances.forEach((instance, index) => {
? ? if (instance.id == vmId) {
? ? ? document.body.removeChild(instances[index].$el)
? ? ? instances.splice(index, 1)
? ? }
? })
}
ModalTable.closeAll = function () {
? for (let i = instances.length - 1; i >= 0; i--) {
? ? instances[i].close()
? }
}
export default ModalTable;3、在main.js文件中掛載vue原型鏈
import ModalTable from './components/modalTable/modalTable.js' Vue.prototype.$modalTable = ModalTable;
4、使用
最后就可以如上文的使用方法，通過(guò)原型鏈調(diào)用ModalTable組件了。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Vue2+Element-ui實(shí)現(xiàn)el-table表格自適應(yīng)高度的案例
- vue element-ui實(shí)現(xiàn)el-table表格多選以及回顯方式
- vue element-ui表格自定義動(dòng)態(tài)列具體實(shí)現(xiàn)
- Vue?element-ui中表格過(guò)長(zhǎng)內(nèi)容隱藏顯示的實(shí)現(xiàn)方式
- vue element-ui里的table中表頭與表格出現(xiàn)錯(cuò)位的解決
- vue?element-ui動(dòng)態(tài)橫向統(tǒng)計(jì)表格的實(shí)現(xiàn)
- vue+element-ui+sortable.js實(shí)現(xiàn)表格拖拽功能
- vue2+element-ui新增編輯表格+刪除行功能
相關(guān)文章
這篇文章主要介紹了Electron + vue 打包桌面操作流程,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06
vue?select組件綁定的值為數(shù)字類(lèi)型遇到的問(wèn)題
這篇文章主要介紹了vue?select組件綁定的值為數(shù)字類(lèi)型遇到的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue實(shí)現(xiàn)小球滑動(dòng)交叉效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)小球滑動(dòng)交叉，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)換膚功能，一套深色，一套淺色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了vue剔除數(shù)組指定位置元素的幾種方法,文中主要介紹了單個(gè)去除和批量去除這兩種方法,并通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-03-03
這篇文章主要介紹了在vue自定義組件中使用?v-model指令詳情，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-06-06
組件是 vue.js最強(qiáng)大的功能之一,而組件實(shí)例的作用域是相互獨(dú)立的,這就意味著不同組件之間的數(shù)據(jù)無(wú)法相互進(jìn)行直接的引用,所以組件間的相互通信是非常重要的,這篇文章主要給大家介紹了關(guān)于Vue組件之間的通信方式,需要的朋友可以參考下2022-06-06
Vue微信公眾號(hào)網(wǎng)頁(yè)分享的示例代碼
這篇文章主要介紹了Vue微信公眾號(hào)網(wǎng)頁(yè)分享的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
Vite?vue3多頁(yè)面入口打包以及部署踩坑實(shí)戰(zhàn)
因?yàn)槲覀児镜捻?xiàng)目是多頁(yè)面應(yīng)用,不同于傳統(tǒng)單頁(yè)面應(yīng)用,一個(gè)包就可以了,下面這篇文章主要給大家介紹了關(guān)于Vite?vue3多頁(yè)面入口打包以及部署踩坑的相關(guān)資料,需要的朋友可以參考下2022-05-05
vue-virtual-scroller是一個(gè)高度可定制的虛擬滾動(dòng)列表插件，它可以在大量數(shù)據(jù)下提供高性能的渲染和滾動(dòng)，這篇文章主要介紹了vue-virtual-scroller 的使用,需要的朋友可以參考下2023-07-07