添加导出

src/views/var/varChange/components/TemplateVariable.vue

 <template>
-    <vxe-modal
-      v-model="showEdit"
-      :z-index="1006"
-      @hide="onHide"
-      title="客户选择"
-      width="800"
-      esc-closable
-      mask-closable
-      show-footer
-    >
-      <template #default>
-        
-  
-        <vxe-table ref="xTable" border :data="data" size="small" height="400">
-          <vxe-column v-for="column in titles" 
-          :key="item" 
-          :field="column" 
+  <vxe-modal
+    v-model="showEdit"
+    :z-index="1006"
+    @hide="onHide"
+    title="客户选择"
+    width="800"
+    esc-closable
+    mask-closable
+    show-footer
+  >
+    <template #default>
+      <vxe-table ref="xTable" border :data="data" size="small" height="400">
+        <vxe-column
+          v-for="column in titles"
+          :key="item"
+          :field="column"
           :title="column"
           show-overflow
-          width="150">
+          width="150"
+        >
+        </vxe-column>
+      </vxe-table>
+    </template>
 
-          </vxe-column>
-        </vxe-table>
-  
-       
-      </template>
-  
-      <template #footer>
-        <el-button type="primary" @click="showEdit = false">关闭</el-button>
-      </template>
-    </vxe-modal>
-  </template>
-  
-  <script lang="ts">
-  import { defineComponent, ref, onMounted, reactive, watch, unref } from 'vue'
-  import { getCustomerPage } from '@/api/customer'
-  import type { VxeTableInstance } from 'vxe-table'
-  import { ElMessage } from 'element-plus'
-  
-  export default defineComponent({
-    name: 'TemplateVariables',
-    props: {
-      visible: {
-        type: Boolean,
-        default: false
-      },
-      titles: {
-        type: Array,
-        default: () => []
-      },
-      data: {
-        type: Array,
-        default: () => []
-      }
+    <template #footer>
+      <el-button type="primary" @click="exportRunData">导出</el-button>
+      <el-button type="primary" @click="showEdit = false">关闭</el-button>
+    </template>
+  </vxe-modal>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, onMounted, reactive, watch, unref } from 'vue'
+import { getCustomerPage } from '@/api/customer'
+import type { VxeTableInstance } from 'vxe-table'
+import { ElMessage } from 'element-plus'
+
+export default defineComponent({
+  name: 'TemplateVariables',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
     },
-    emits: ['update:visible'],
-    setup(props, { emit }) {
-      const showEdit = ref(false)
-      const xTable = ref<VxeTableInstance>()
-      const tableData = ref([])
-      
-  
-      watch(
-        () => props.visible,
-        (val) => {
-          showEdit.value = val
-        }
-      )
+    titles: {
+      type: Array,
+      default: () => []
+    },
+    data: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ['update:visible'],
+  setup(props, { emit }) {
+    const showEdit = ref(false)
+    const xTable = ref<VxeTableInstance>()
+    const tableData = ref([])
 
-  
-      const onHide = () => {
-        emit('update:visible', false)
-      }
-      return {
-        showEdit,
-        xTable,
-        tableData,
-        onHide,
+    watch(
+      () => props.visible,
+      (val) => {
+        showEdit.value = val
       }
+    )
+
+    const onHide = () => {
+      emit('update:visible', false)
+    }
+
+    const exportRunData = () => {
+      xTable.value?.exportData({ type: 'csv' })
+    }
+    return {
+      showEdit,
+      xTable,
+      tableData,
+      onHide,
+      exportRunData
     }
-  })
-  </script>
-  <style lang="scss" scoped></style>
-  
+  }
+})
+</script>
+<style lang="scss" scoped></style>
\ No newline at end of file