• 表格导出
    • 普通用法

    表格导出

    常用的表格导出功能,如果开启此功能需要在项目中加入依赖包,建议采用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>