当前位置: 首页 > 工具软件 > vue-easytable > 使用案例 >

vue-easytable 复制粘贴excal数据于表格中

仲孙铭
2023-12-01

vue-easytable 版本1.x
v-clipboard 获取复制的内容(也可以不用这个插件,用原生的)

/* istanbul ignore next
event   input paste事件
tableData 表格数据汇总必须存在id,且是唯一值
isSpring  可编辑字段
*/

const pasteFirst = (event, tableData, isSpring, category) => {
  category = category || 'category'
  // 表格粘贴复制
  let data = event.clipboardData.getData('Text')
  // 如果粘贴板内有\t 阻止原始粘贴
  if (data.includes('\t') || data.includes('\n') || data.replace(/\s*/g)) {
    event.preventDefault()
    // 移除可能出现的末尾的换行
    if (data.length && data[data.length - 1] === '\n') {
      data = data.substr(0, data.length - 1)
    }
    // // 获取允许编辑的字段名称列表
    const editFieldList = isSpring
    // 将粘贴板数据变为二维数组
    const rowList = data.split('\n')
    for (let i = 0; i < rowList.length; i++) {
      rowList[i] = rowList[i].split('\t')
    }
    // 寻找 input 的元素对象
    const inputElement = event.path.find(
      item => item.getAttribute(category) === 'edit-table-cell'
    )
    // console.log(inputElement)

    if (inputElement) {
      // 获得当前编辑的输入框的 id 和字段名称
      const { id, col } = inputElement.dataset
      // 寻找当前编辑的表格行
      const dataIndex = tableData.findIndex(item => item.id === id)
      // 获取当前编辑的表格列
      const fieldIndex = editFieldList.indexOf(col)
      if (dataIndex !== -1 || fieldIndex !== -1) {
        // 计算需要被粘贴的表格数据
        const rowLength = rowList.length
        const needPasteTableDataList = tableData.slice(
          dataIndex,
          dataIndex + rowLength
        )
        // 计算需要被粘贴的字段列表
        const colLength = rowList[0].length
        const needPasteFieldList = editFieldList.slice(
          fieldIndex,
          fieldIndex + colLength
        )
        // console.log('needPasteTableDataList', needPasteTableDataList)
        // console.log('needPasteFieldList', needPasteFieldList)

        // 最终要粘贴的数据对象数组,即粘贴板的二维数组的每一个元素内的数组与被粘贴的字段列表组装
        const finalDataList = rowList.map(item => {
          const object = {}
          // console.log(item)

          item.forEach((value, index) => {
            // console.log(value, index, needPasteFieldList[index])

            if (needPasteFieldList[index]) {
              object[needPasteFieldList[index]] = value
            }
          })
          return object
        })
        // console.log('finalDataList', finalDataList)
        // 更新真实字段数据
        needPasteTableDataList.forEach((item, index) => {
          if (item) {
            if (finalDataList[index]) {
              Object.assign(item, finalDataList[index])
            }
          }
        })
        // 这是一次多行修改
        // this.isMultipleSave = true
        // // console.log(this.isMultipleSave)
        // // TODO:调接口保存   needPasteTableDataList
        let modifyTableList = needPasteTableDataList.filter(item => item)
        return modifyTableList
        // console.log(needPasteTableDataList)
      } else {
        this.$message.error('获取粘贴对象失败')
      }
    } else {
      this.$message.error('获取粘贴对象失败')
    }
  }
}

export { pasteFirst }

 类似资料: