Vue基于Element-ui怎么實(shí)現(xiàn)表格彈窗組件

本篇內(nèi)容主要講解“Vue基于Element-ui怎么實(shí)現(xiàn)表格彈窗組件”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Vue基于Element-ui怎么實(shí)現(xiàn)表格彈窗組件”吧!

效果圖

使用方式

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中，正常開發(fā)即可，后續(xù)會通過別的方式將數(shù)據(jù)傳入組件data中。

<template>
  <el-dialog ref="dialog"
             :title="title"
             :visible.sync="visible"
             width="30%"
             :before-close="beforeClose">
    <el-table :data="tableData"
              >
      <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里將這個組件移除  
      // visible只是控制了顯示與隱藏  但是dom結(jié)構(gòu)中還是存在組件  為了避免消耗內(nèi)存必須銷毀組件
      // 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文件

在組件中沒有props接收參數(shù)，那么如何給modalTable組件傳參，這就需要一個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)：在這里將你傳過來的參數(shù)匹配到modalTable.vue組件的data
    data: {
      ...options,
      vmId: id
    }
  })

  console.log("instance", instance);

  instance.id = id;
  instance.$mount(); // 掛載但是并未插入dom，是一個完整的Vue實(shí)例
  document.body.appendChild(instance.$el) // 將dom插入body
  instance.visible = true //這里修改modalTable.vue數(shù)據(jù)中的visible,這樣modalTable組件就顯示出來
  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、使用

最后就可以如上文的使用方法，通過原型鏈調(diào)用ModalTable組件了。

到此，相信大家對“Vue基于Element-ui怎么實(shí)現(xiàn)表格彈窗組件”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！