专栏首页移动端周边技术扩展Vue实现复制excel表格内容粘贴至网页

Vue实现复制excel表格内容粘贴至网页

需求

要求复制excel表格内容粘贴至网页表格,并且自动生成格式,不要问为什么不使用导入excel,我也不知道客户为什么不用

秉承用户是上帝的原则?

使用Handsontable表格组建 引入与使用

cnpm install handsontable @handsontable/vue
//main.js中
import 'handsontable/dist/handsontable.full.css';
// vue页面
import {
    HotTable
} from '@handsontable/vue';
import Handsontable from 'handsontable';

主体实现代码

<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-row>
        <el-form-item label="月份">
          <el-date-picker v-model="queryParams.date" type="month" placeholder="选择月">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="save">保存</el-button>
        </el-form-item>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="月份预测小结:" required>
            <el-input style="width:400px" type="textarea" v-model="queryParams.funName" placeholder="月份预测小结" clearable
              size="small"  />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div>
      <hot-table :data="tableData" width='100%' :colHeaders="colHeaders" :columns="columns" :manualRowResize='true'
        :copyable='true' :settings="hotSettings" :after-change="afterChange" :rowHeights="40" :colWidths="150"
        className="htCenter htMiddle notread">
      </hot-table>
    </div>
  </div>
</template>

<script>

  import {
    HotTable
  } from '@handsontable/vue';
  import Handsontable from 'handsontable';
  import {
    getCountDays,
    getCurrentMonthDayList
  } from "@/utils/index";
  export default {
    name: "financialStatement",
    components: {
      HotTable
    },

    data() {
      return {
        // 查询参数
        queryParams: {
          date: new Date()
        },
        colHeaders: ["日期", "预计上日余额", "本日收入", "本日支出", "预计本日余额"],
        columns: [{
            editor: false,
            readOnly: true
          },
          {
            type: 'numeric'
          },
          {
            type: 'numeric'
          },
          {
            type: 'numeric'
          },
          {
            type: 'numeric'
          }
        ],
        rowHeaders: [],
        tableData: [],
        hotSettings: {
          //数据部分,这个就不多说了
          data: [],
         
        }
      };
    },
    created() {
      var dayList = getCurrentMonthDayList(this.queryParams.date)
      dayList.forEach(element => {
        var day = [element, '', '', '', '']
        this.tableData.push(day)
      });
    },
    mounted() {
      Handsontable.hooks.add("afterChange", function (result) {
        console.log("-result", result)
      });
    },
    methods: {
      handleQuery() {
          console.log("---search", this.queryParams)
      },
      save() {
          console.log("---save", this.tableData)
      },
      afterChange: function (changes, source) {
        //   if (source == 'edit') {
        //     console.log(changes);
        //     changes.forEach(([row, prop, oldValue, newValue]) => {
        //       //this 表示当前的handsontable对象
        //       let cell = this.getCell(row, prop);
        //       cell.style.background = 'lavender';
        //     });
        //   }
      },
      /** 查询菜单列表 */
      getList() {
    //    查询数据
      },
      mergeCell(changes) {
        // 有变化
        if (changes) {
          // 遍历变化行数
          changes.forEach(([row]) => {
            // 只对3的倍数行进行合并
            //这里条件判断可以写复杂一点,确保粘贴非3倍数时候的处理,我偷懒所以。。
            if ((row / 3) === this.hotSettings.mergeCellsCount) {
              // 合并处理
              this.hotSettings.mergeCells.push({
                row: row,
                col: 0,
                rowspan: 3,
                colspan: 1
              }, {
                row: row,
                col: 24,
                rowspan: 3,
                colspan: 1
              });
              // 只合并一次提高运行效率,不然粘贴大量数据多次合并会卡
              this.hotSettings.mergeCellsCount++
            }
          });
        }
      }
    }
  };
</script>

效果

截屏2020-07-23 下午2.51.19.png

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 移动端input输入历史建议

    程序员不务正业
  • fallthrough语法

    程序员不务正业
  • 小程序bindtap参数传递

    程序员不务正业
  • 浅入深出Vue:注册

    基本布局已经有了, 现在我们来开始做我们的注册页面~ 当然需要注册才能发表文章啊(糟老头子坏得很, 我可以只有我一个人能发啊)。

    若羽
  • 【Vue.js】Vue.js组件库Element中的导航菜单、标签页、面包屑和页头

    魏晓蕾
  • jQuery 写法示例

    Joel
  • DOM 操作写法示例

    Joel
  • 【Vue.js】Vue.js组件库Element的基础用法

    Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,是帮助网站快速成型的工具。

    魏晓蕾
  • Vue使用Element实现增删改查+打包

    在我们进行项目开发期间,避免不了使用各式各样的组件,Element是由饿了么公司前端团队开源。样式精美、组件齐全、易于上手。

    憧憬博客
  • 自定义element UI的upload组件

    本文由腾讯云+社区自动同步,原文地址 https://stackoverflow.club/article/elementui_upload_custom/

    羽翰尘

扫码关注云+社区

领取腾讯云代金券