输入框内容转表格：
这里是拿到输入框的内容转化为表格数据格式
//判断输入框是否有内容
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');
}
如果此文对你有用请动动你的小手点个赞！谢谢！！！
网友评论