Vue—用$refs获取DOM元素+导出Excel

功能是Vue导出Excel。讲解是获取DOM元素。

<div id="api">
          **//用属性ref赋值为table，为了js方法里好找到。**
    <Table ref="table" height="400"  size="small" :columns="columns7" :stripe="true" :data="data6" border ></Table>
</div>

<script>
import axios from "axios";
import Util from "../../libs/util";
export default {
  data() {
    return {
    //表格显示的内容。
      columns7: [
        {
          title: "SAP工单",
          key: "sapOrderID"
        },
        {
          title: "销售订单号",
          key: "salesOrderID"
        },
        {
          title: "物料编码",
          key: "defID"
        },
        {
          title: "物料描述",
          key: "defDescript"
        },
        {
          title: "工单类型",
          key: "sapOrderType"
        },
        {
          title: "车间",
          key: "departID"
        },
        {
          title: "创建时间",
          key: "createdOn"
        }
      ],
      data6: [],
      isShowDialog: false,
      isShowDeleteDialog: false,
      dialogTitle: "新增用户",
      item: {
        userID: 0,
        name: "",
        age: 0,
        address: "",
        sex: "",
        work: "",
        createOn: "",
        pageIndex: 0,
        pageSize: -1
      },
      itemSearch: {
        id: 0,
        sapOrderID: "",
        sapOrderType: "",
        salesOrderID: "",
        defID: "",
        defDescript: "",
        departID: "",
        createdOn: "",
        pageIndex: 0,
        pageSize: 10
      },
      actionIndex: -1,
      apiUrl: "http://172.16.6.155/portalapi/api/erpOrder", //util.ajaxUrl + '/erpOrder',   //172.16.6.155
      saveType: "new" /* new / edit */,

      // 初始化信息总条数
      dataCount: 1000,
      // 每页显示多少条
      pageSize: 10,
      spinShow: false
  },
  methods: {
     exportData (type) {
                if (type === 1) {
                    //用$refs.table获取页面的元素table
                    this.$refs.table.exportCsv({
                        filename: 'data'
                    });
                }

     },
   }

Vue代码实现简单灵活，但要明白原理才可实现的！