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代码实现简单灵活，但要明白原理才可实现的！