使用vue-json-excel和vue-easytable插件实现表格下载和虚拟列表

<template>
  <div>
    <div>
<!--      :header="title" 下载后的表格中的标题  :fields="json_fields" 要导出哪一列的title，默认导出全部列 -->
      <download-excel
          class="export-excel-wrapper"
          :data="tableData"
          name="虚拟列表数据"
          :fields="fields"
      >
        <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
        <Button type="primary">下载表格</Button>
      </download-excel>
    </div>

    <Tag color="#612cd6" size="large">
      <span>已选中</span>
      <span>{{selectedCheckboxList.length}}</span>
      <span>条数据</span>
    </Tag>

    <div>
      <ve-table
                :max-height="500"
                :virtual-scroll-option="virtualScrollOption"
                :columns="columns"
                :table-data="tableData"
                row-key-field-name="rowKey"
                :border-x="true" :border-y="true"
                :checkbox-option="checkboxOption"
      />
    </div>
  </div>

</template>

<script>
export default {
  name:"downLoadEasyTable",
  data() {
    return {
      virtualScrollOption: {
        // 是否开启虚拟滚动
        enable: true,
      },
      columns: [
        //  key保证不一样，如果一样的话，点击某一列，那么和她相同key的列也会有选中的效果
        {field: "", key: "aa", type: "checkbox", title: "", width: 50, align: "center",},
        {field: "index", key: "a", title: "#", width: 100, align: "center",},
        {field: "name", key: "b", title: "Name", width: "", align: "center",},
        {field: "hobby", key: "c", title: "Hobby", width: "", align: "center",},
        {field: "address", key: "d", title: "Address", width: "", align: "center",
          renderHeaderCell: ({ column }, h) => {
            return (
                <span>{column.title}</span>
            );
          },
        },
        {field: "status", key: "dd", title: "状态", width: "",
          align: "center",
          renderBodyCell: ({ row, column, rowIndex }, h) => {
            if(row.status == 1) {
              return (<span>成功success</span>)
            } else if(row.status == 2) {
              return (<span>失败error</span>)
            } else {
              return (<span >未知原因中断no Why</span>)
            }
          },
        },
      ],
      tableData: [],
      fields: {       // 下载哪些列
        姓名: 'name',
        爱好: 'hobby',
        地址: 'address',
        状态: {
          field:'status',
          callback:(value)=>{
            if(value == 1) {
              return '成功'
            }else if(value == 2) {
              return "失败"
            } else {
              return "未知原因中断"
            }
          }
        }
      },
      checkboxOption: {
        // 行选择改变事件，插件中没有直接给出获取已选中数据的方法，所以需要自己过滤
        selectedRowChange: ({ row, isSelected, selectedRowKeys }) => {
          console.log("所有选中的 rowKey 信息", selectedRowKeys);   // 用这个
          this.selectedCheckboxList = [];   // 每次点击前先把 已选中的数据清空，避免重复添加
          selectedRowKeys.forEach(rowKey =>{
            this.selectedCheckboxList.push(this.tableData[rowKey].name)     // 这里只是获取了name，实际开发中可以这样获取已经选中的uuid
          })
          console.log("选中的数据",this.selectedCheckboxList);
        },
        // 全选改变事件
        selectedAllChange: ({ isSelected, selectedRowKeys }) => {
          // console.log(isSelected, selectedRowKeys);
          this.selectedCheckboxList = [];   // 每次点击前先把 已选中的数据清空，避免重复添加
          selectedRowKeys.forEach(rowKey =>{
            this.selectedCheckboxList.push(this.tableData[rowKey].name)     // 这里只是获取了name，实际开发中可以这样获取已经选中的uuid
          })
        },
      },
      selectedCheckboxList:[]
,    };
  },
  methods: {
    initData() {
      let data = [];
      for (let i = 0; i < 100; i++) {
        data.push({
          rowKey: i,
          index: i,
          name: `name${i}`,
          hobby: `hobby${i}`,
          address: `address${i}`,
          status: i % 3 == 0 1 : i % 2 == 0 2 : 3,
        });
      }

      this.tableData = data;
    },
  },
  created() {
    this.initData();
  },
};
</script>
<style scoped>
/* 要想使用class 控制的样式生效，就不能加scoped */
.aa {
  color:blue;
}
</style>

图片.png

使用vue-json-excel来完成表格的数据导出到excel中
使用vue-easytable插件实现表格中的虚拟列表

main.js中
// 引入样式 （vue-easyTable） 命令：npm install vue-easytable
import "vue-easytable/libs/theme-default/index.css";
// 引入组件库
import VueEasytable from "vue-easytable";
Vue.use(VueEasytable);

// 导出表格数据 命令：npm install vue-json-excel -S
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)