页面功能

1. 删除功能

<el-button>
@click = delete(row)
</el-button>

methods: {
   delete (row) {
     deleteTime().then((res) => { //deleteTime为接口名
     if(res.code === 200) {
       this.$message.success('删除成功')
       this.tableData = [ //tableData中为删除的数据          {             startLimit: '',             endLimit: ''          }           ]
      }
   })        
  }
}

2. vxe-table 进入直接显示表格

mounted() {
  getReport().then(res => {
    this.tableData = res
  })
}

• getReport 为接口名
• tableData 为绑定的数据
• 如果接口处没有code = 200 格式，则在res 后加上.data

3. vxe-table的导出功能

• 需要绑定vxe-table里边的ref属性

loadOut() {
 this.$refs.taskDisposalTableRef.exportData({
  filename: "导出的名字" + dayjs(new Date()).format("YYYY-MM-DDTHH-mm-ss"),
  sheetName: "Sheet1",
  type: "xlsx"
  })
}

或者

loadOut() {
  this.$refs.taskDisposalTableRef.exporData({
    type: 'csv'
  })
}

4. el-table的导出功能

• 需要绑定el-table里的id属性。

  id = "tabOut"

• node_modules 包中引入xlsx 和 fileSaver 两个包

• main.js中

import XLSX from 'xlsx/xlsx'
import * as FileSaver from 'file-saver/src/FileSaver'
Vue.prototype.$FileSaver = FileSaver
Vue.prototype.$XLSX = XLSX

<el-button>
@click = "export('tabOut', '导出.xlsx')"
</el-buttton>

• 页面中

export: function () {
  const tables = document.getElementByld('tabOut')
  const table_book = this.$XLSX.utils.table_to_book(tables)
  const table_write = this.$XLSX.write(table_book, {
    bookType: 'xlsx',
    bookSST: true,
    type: 'array'
  })
  try {
    this.$FileSaver.saveAs(
      new Blob([table_write], { type: 'application/octet-stream'}),
      '导出.xlsx'
    )   
  }  catch (e) {
      if (typeof console !== 'undefined') console.log(e, table_write)
  }
  return table_write
}