输入框输入表格内容转化为表格格式以及表格格式转为输入框 用form-create来生成的表格 基于VUE

输入框内容转表格：

这里是拿到输入框的内容转化为表格数据格式

//判断输入框是否有内容
if(value){
   this.tableCopyValue = value;
   //用转换符号分割成数组
   let tableRow = value.split(/\n/);
   let tableCopyCol = [];
   this.tableCopyCol = [];
   //再把数组每一项用空格分隔
   tableRow.map((item) => {
     if(item !== ''){
       tableCopyCol.push(item.trim().split(/\s+/));
     }
   });
   //this.columns 是表头数据
   //this.columns 栗子：[{id: '随机数',value: '值', desc: '描述', startTime: '开始时间', endTime:'结束时	   				        //间'}]
   // 根据表头key将输入框拿到的值根据表头的key生成和表头相同key的数组
   tableCopyCol.map((item,index) => {
     item.unshift(Math.random());
     this.tableCopyCol[index] = {};
     item.map((col, colIdx) => {
       this.tableCopyCol[index][this.columns[colIdx].key] = col
     })
     this.tableData.push(
       this.mergeColumnData({ [this.keyField]: Math.random(), _add: true }, this.tableData.length, index)
     )
   });
 }

这里是把转好的表格格式赋值进表格，并将数据进行克隆，以下代码可能有些你不需要的，那就舍弃掉。

//cloneDeep 是loadsh的API

deepClone (obj) {
    return cloneDeep(obj)
  },
mergeColumnData(data, index, num) {
   // 根据现有值作为判断标准
   const target = {}
   // 判断是否需要填充自动排序值
   const hasIncrement = this.columns.filter(v => v.increment)
   if (hasIncrement.length) {
     hasIncrement.forEach(v => {
       // 设置key，但不设置value
       data[v.key] = undefined
     })
   }
   // 遍历字段赋值
   Object.keys(data).forEach(key => {
     let value = data[key]
     if (this.selectOptionsCache[key]) {
       // 下拉框，判断值还是否存在于下拉数据中，不存在则设置为首项默认值，亦不存在则清空
       const options = this.selectOptionsCache[key]
       const option = options.find(v => v.value === data[key])
       if (!option) value = options.length > 0 ? options[0].value : ''
     }
     // 自动排序值
     if (!data[key] && hasIncrement.find(v => v.key === key)?.increment) {
       value = index + 1
     }
     if (typeof value !== 'undefined' && value !== null) target[key] = value
   })
   this.tableCopyColIndex = num
   return this.$utils.deepClone(
     Object.assign({}, this.columnsData, target)
   )
 }
columnsData() {
   const o = {}
   this.columns.forEach(item => {
     // 根据列设置作为判断标准，设置默认值
     if (!item.key) return
     if (item.default) {
       o[item.key] = item.default
     } else if (item.type && String.prototype.toLowerCase.apply(item.type) === 'select') {
       if (Array.isArray(this.selectOptionsCache[item.key]) && this.selectOptionsCache[item.key].length > 0) {
         // 选择第一项数据设为默认值
         o[item.key] = this.selectOptionsCache[item.key][0].value
       }
     } else if(this.tableCopyCol.length > 0){
       this.tableCopyCol.map((col, index) => {
         Object.keys(col).map((cols) => {
           let value = col[cols];
           if(item.key === cols &&　this.tableCopyColIndex === index)
             o[item.key] = value
         })
       })
     } else {
       o[item.key] = ''
     }
   })
   return o
 }

表格数据转为字符串赋值到输入框内

if(this.data.length>0){
   let sortData = []; //保存将要排序的数据
   let newData = []; //保存排好序的数据
   let resultData = []; //最终子数组转为字符串的数据
   let sortCol = [];//获取表头对应的key生成一个以key值为value，和表头排序一致的数组
   //获取表格数据  把表格数据变成二维数组，并把对应的key值以及对应的value值放到同一数组，并进行按照表格排序
  //this.data 表格数据
  //this.columns 表头数据  表格数据根据表头进行顺序排列
   this.data.map((item,index) => {
     sortData[index] = [];
     Object.keys(item).map(key => {
       let value = item[key];
       sortData[index].push({
        key: key,
        value: value
       });
     })
   })
   //获取表头对应的key生成一个以key值为value，和表头排序一致的数组
   this.columns.map((col) => {
     sortCol.push(col.key)
   })
   //根据表头生成的数组排序
   sortData.map(item => {
     return item.sort((a, b) => {
       return sortCol.indexOf(a.key)-sortCol.indexOf(b.key);
     })
   })
   //排除不丢进输入框的内容  去除id
   sortData.map((item, index) => {
     newData[index] = [];
      item.map(items => {
        if(items.key !== "dataModelColumnId"){
          newData[index].push(items.value)
        }
      })
   })
   //将生成的数据进行空格以及转行分割成字符串
   newData.map(item => {
     var regEx = /,/g;
     resultData.push(item.join(',').replace(regEx, ' '))
   })
   this.tableCopyValue = resultData.join('\n');
 }