表格导出

常用的表格导出功能,如果开启此功能需要在项目中加入依赖包,建议采用cdn的形式

  1. <!-- 导入需要的包 -->
  2. <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
  3. <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.1/xlsx.full.min.js"></script>

普通用法

导出 - 图1

excelBtn设置为true即可开启导出功能,如果配置了selection属性,则需要勾选导出的数据,否则为全部,如果配置了title属性,则为导出文件的名称

  1. <avue-crud :option="option" :data="data"></avue-crud>
  2. <script>
  3. export default {
  4. data(){
  5. return {
  6. data:[{
  7. text1:'内容1-1',
  8. text2:'内容1-2'
  9. },{
  10. text1:'内容2-1',
  11. text2:'内容2-2'
  12. }],
  13. option:{
  14. title:'表格的标题',
  15. excelBtn:true,
  16. addBtn:false,
  17. menu:false,
  18. align:'center',
  19. column: [{
  20. label: '列内容1',
  21. prop: 'text1',
  22. }, {
  23. label: '列内容2',
  24. prop: 'text2',
  25. }]
  26. }
  27. }
  28. }
  29. }
  30. </script>