封装导入导出，可根据标识符分割表格

引用页面

            <fieldLoadTo :tableInfoList="tableInfoList"
                         :tableKeys="tableKeys"
                         :loadtoJudge="loadtoJudge"
                         @loadto-close="loadtoClose"
                         @loadto-btn="loadtoBtn"></fieldLoadTo>

tableKeys是表格的一行内所有的字段名

  // 导出弹窗需要的tablekey
  tableKeys = {
    default: {
      targetField: '',
      type: '',
      value: ''
    },
    special: [
      {
        key: 'type',
        value: 'DictionaryMapping',
        tableKeys: {
          targetField: '',
          type: '',
          dictionaryId: '',
          value: ''
        }
      }
    ],
    dic: [
      {
        key: 'type',
        dicList: [
          {
            value: 'Field',
            label: '取字段'
          },
          {
            value: 'FixedValue',
            label: '固定数值'
          },
          {
            value: 'FixedString',
            label: '固定字符串'
          },
          {
            value: 'DictionaryMapping',
            label: '字典映射'
          },
          {
            value: 'ConcatFun',
            label: 'Concat函数'
          },
          {
            value: 'CoalesceFun',
            label: 'Coalesce函数'
          },
          {
            value: 'Expression',
            label: '表达式'
          }
        ]
      }
    ],
    example: '目标字段,取值方式,字典（当取值类型为字典映射时存在）,目标值（取值方式为函数并且为多个时可用分隔符分割）' +
      '\n' +
      'id,Field/取字段,`sys_dict_data.dict_code`' +
      '\n' +
      'id,FixedString/固定字符串,0' +
      '\n' +
      'mental_flag_id,FixedValue/固定数值,121' +
      '\n' +
      'mental_flag_id,DictionaryMapping/字典映射,5208614824230260489,`sys_dict_data.css_class`' +
      '\n' +
      'business_id,ConcatFun/Concat函数,`sys_dict_data.dict_label`,`sys_dict_data.update_by`' +
      '\n' +
      'mental_flag_id,CoalesceFun/Coalesce函数,`sys_dict_data.dict_type`,`sys_dict_data.dict_code`' +
      '\n' +
      'per_base_info_id,Expression/表达式,123131'
  }

tableInfoList是表格数据
loadtoJudge 是判断导读还是导出

组件页面

<template>
  <!-- 字段引入 -->
  <el-form ref="loadto"
           :model="fielForm"
           style="width:100%"
           label-width="100px">
    <el-form-item label="分割符"
                  prop="dbName">
      <el-input v-model="fielForm.dbName"></el-input>
    </el-form-item>
    <el-form-item label="内容"
                  prop="schemaName">
      <el-input v-model="fielForm.schemaName"
                type="textarea"
                :rows="5"></el-input>
    </el-form-item>
    <el-form-item label=""
                  prop="schemaName">
      <el-button @click="loadtoClose">取 消</el-button>
      <el-button type="primary"
                 v-if="loadtoJudge"
                 @click="loadtoData">确 定</el-button>
      <el-button type="primary"
                 v-else
                 @click="refresh">刷 新</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {
  Component,
  Mixins,
  Watch,
  Vue,
  Emit,
  Prop
} from 'vue-property-decorator'
import MyPagination from '@/mixins/pagination'
import MyDelete from '@/components/publiccomponent/MyDelete.vue'
import { flatten } from '@/utils/data'
@Component({
  components: {
    MyDelete // 声明子组件的引用
  }
})
export default class fieldLoadTo extends Mixins(MyPagination) {
  @Prop()
  tableInfoList

  @Prop()
  tableKeys

  @Prop()
  loadtoJudge

  @Emit()
  loadtoClose () {}

  @Emit()
  loadtoBtn (tableInfoList) {}

  keyList = []
  @Watch('tableInfoList', { deep: true, immediate: true })
  changform (val, old) {
    console.log(val)
    //   this.keyList = Object.keys(this.tableKeys)
    this.fielForm.dbName = ','
    if (val.length == 0) {
      this.fielForm.schemaName = this.tableKeys.example ? this.tableKeys.example : ''
    } else {
      this.fielForm.schemaName = ''
      this.refresh()
    }
  }

  fielForm = {
    dbName: '',
    schemaName: '',
    tableInfoList: []
  }

  leadTo = true
  // 导入确定按钮
  loadtoData () {
    this.leadTo = true
    const form = this.fielForm.schemaName.split('\n')
    const tableInfoList = []
    form.forEach((ele, line) => {
      const item = {}
      const valueList = ele.split(this.fielForm.dbName)
      this.keyList = Object.keys(this.tableKeys.default)
      // 判断是否为空
      if (!ele || ele == '') {
        return
      }
      console.log(ele)
      const fn = []
      // 判断是否有特殊key
      if (this.tableKeys.special && this.tableKeys.special.length > 0) {
        this.tableKeys.special.forEach((key) => {
          valueList.forEach((value, i) => {
            // 判断是否有特殊的key和value
            if (this.keyList[i] === key.key && value === key.value) {
              this.keyList = Object.keys(key.tableKeys)
              item[this.keyList[i]] = value
              console.log(item, i, this.keyList[i], key.key, 'item')
            } else {
              if (i < this.keyList.length - 1) {
                item[this.keyList[i]] = value
              } else {
                fn.push(value)
                item[this.keyList[this.keyList.length - 1]] = fn
              }
            }
          })
        })
      } else {
        // 默认key列表
        valueList.forEach((value, i) => {
          this.keyList = Object.keys(this.tableKeys.default)
          if (i < this.keyList.length - 1) {
            item[this.keyList[i]] = value
          } else {
            fn.push(value)
            item[this.keyList[this.keyList.length - 1]] = fn
          }
        })
      }
      // 根据字典转化成value
      if (this.tableKeys.dic && this.tableKeys.dic.length > 0) {
        this.keyList = Object.keys(this.tableKeys.default)
        const dic = []
        this.tableKeys.dic.forEach((ele) => {
          const dicItem = []
          ele.dicList.forEach((dicele) => {
            const dicEle = Object.values(dicele)
            dicItem.push(...dicEle)
            valueList.forEach((value, i) => {
              if (
                this.keyList[i] === ele.key &&
                item[this.keyList[i]] == dicele.label
              ) {
                item[this.keyList[i]] = dicele.value + ''
              }
            })
          })
          // 判断dic中是否含有导入的值
          if (dicItem.indexOf(item[ele.key]) === -1) {
            this.leadTo = false
            this.$message.error(
              '第' + line + '行的' + ele.key + ':' + item[ele.key] + '不存在'
            )
          }
          //   console.log(item, item[this.keyList[i]], ele.label, 'item')
        })
      }

      tableInfoList.push(item)
    })
    //   console.log(tableInfoList, 'tableInfoList')
    if (this.leadTo) {
      this.loadtoBtn(tableInfoList)
    }
  }

  refresh () {
    this.fielForm.schemaName = ''
    //   console.log(val)
    this.keyList = Object.keys(this.tableKeys)
    this.tableInfoList.forEach((ele, index) => {
      const valueList = Object.values(ele)
      // console.log(flatten(valueList), 'llll')
      // 数组内部的数组拼合到第一层
      // const flattenList = flatten(valueList)
      const flattenList = valueList
      console.log(valueList, ele, this.tableInfoList, 'this.tableInfoList')
      if (this.tableInfoList.length - 1 === index) {
        this.fielForm.schemaName += flattenList.join(this.fielForm.dbName)
      } else {
        this.fielForm.schemaName +=
          flattenList.join(this.fielForm.dbName) + '\n'
      }
    })
  }
}
</script>

<style scoped>
.el-textarea {
  max-width: 100%;
}
.el-input {
  max-width: 100%;
}
</style>