- 输入框输入表格内容转化为表格格式以及表格格式转为输入框 用for
- iview 通过render函数渲染生成的input输入框实现双
- Axure RP 9 中继器原理——添加行
- Python脚本:fasta文件多序列信息统计
- 多位验证码输入框功能 - 微信小程序
- html5表格标签
- HTML-表格table-2018.07.05
- html列表
- vue input 输入框聚焦
- 自定义表格式布局FormLayout
输入框内容转表格:
这里是拿到输入框的内容转化为表格数据格式
//判断输入框是否有内容 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'); }
如果此文对你有用请动动你的小手点个赞!谢谢!!!
网友评论