el-table——可编辑拖拽转换csv格式的表格

 

* 通用的table展示
* @param  {Array} tableData
* @param  {Array} tableColumn
* @return {Number/String} height(参考element)
* @return {String} size(参考element)
* @return {Boolean} stripe 默认显示
* @return {Boolean} sortable 默认显示
* @return {Boolean} loading
* @return {Function} filterChange
* @return {Function / String} tableRowClassName 底色
* @return {String} slot 插入的位置：header、footer、footerDesc
* */

 

< template >

< div >

< el-button

size= "mini"

type= "primary"

@ click=" showDialog" >{{ dialogTitle }} el-button >

< CommonTable

style= "marginTop:10px"

: table-data=" tableDataBeigin"

: table-column=" dropCol"

/>

< el-dialog

: visible. sync=" dialogVisible"

@ open=' openDialog'

: close-on-click-modal=" false"

append-to-body

show-close

: before-close=" beforeClose"

: title=" dialogTitle"

width= '40%'

>

< div

v-if="! tabShow"

style= "margin-top:-20px;" >

< DragTableView

: table-data=" tableDataDialog"

: drop-col=" dropCol"

: save-disabled=' saveDisabled'

@ save-call-back=" saveCallBack"

/>

div >

< el-tabs

v-else

@ tab-click=" handleClickTab"

style= "margin-top:-20px;"

v-model=" activeName"

type= "card" >

< el-tab-pane

label= "表格编辑模式"

name= "table"

>

< DragTableView

: table-data=" tableDataDialog"

: drop-col=" dropCol"

: save-disabled=' saveDisabled'

@ save-call-back=" saveCallBack"

/>

el-tab-pane >

< el-tab-pane

label= "文本编辑模式"

name= "txt"

>

< el-input

v-model=" strSplit"

type= "textarea"

: rows=" 6"

placeholder= "例：a,int,描述a，类型int。"

spellcheck= 'false'

/>

< h4 style= "margin:5px 0" >注意： h4 >

< ul style= "text-align:left" >

< li >1.所有字段输出后，将自动清除空格；若有数据类型，转换后均为小写(不符合规范的默认设置为string)。 li >

< li >2.手动编辑时，注意第3个逗号(不区分中英文)后面的内容将合并到最后一列，新的一行用Enter键换行。 li >

< li >3.可将导出的csv文件内容，直接复制到文本编辑框进行输出。 li >

ul >

el-tab-pane >

el-tabs >

< span

slot= "footer"

class= "dialog-footer"

>

< el-button

size= "mini"

type= "primary"

@ click=" submitDialog"

: disabled=" saveDisabled"

>保存 el-button >

span >

el-dialog >

div >

template >

< script >

import CommonTable from './CommonTable' // 展示内容

import DragTableView from './dragTableView' // 展示内容

import Sortable from 'sortablejs' // 拖拽排序

export default {

components: {

CommonTable,

DragTableView

},

props: {

'tableData' : {

type: Array,

default () {

return []

}

},

'dropCol' : {

type: Array,

default () {

return [

{

default: '',

label: '字段',

prop: 'field_name'

},

{

default: 'string',

label: '类型',

prop: 'field_type'

},

{

default: '',

label: '描述',

prop: 'field_desc'

}

]

}

},

'dialogTitle' : {

type: String,

default: ''

},

'tabShow' : {

type: Boolean,

default: false

}

}, // 数据与标题

data () {

return {

strSplit: '',

activeName: 'table',

dialogVisible: false, // 对话框

saveDisabled: false, // 禁用保存

tableDataBeigin: [], // 原数据

tableDataDialog: [] // 编辑数据

}

},

watch: {

tableData: {

immediate: true,

handler ( arr) {

this. getDialogTableData()

}

}

},

methods: {

showDialog () {

if ( this. activeName === 'txt') {

this. strSplitFormat()

}

this. dialogVisible = true

},

deepCopy ( source) {

let result;

( source instanceof Array) ? ( result = []) : ( result = {})

for ( let key in source) {

result[ key] = ( typeof source[ key] === 'object') ? this. deepCopy( source[ key]) : source[ key]

}

return result

},

openDialog () { // 打开对话框

if ( this. activeName === 'table') {

this. $nextTick( function () {

this. rowDropDialog()

})

}

},

beforeClose () {

this. getDialogTableData()

this. dialogVisible = false

this. saveDisabled = false

},

findStrIndex ( str, cha, num) { // 字符串截取

var x = str. indexOf( cha)

for ( var i = 0; i < num; i++) {

x = str. indexOf( cha, x + 1)

}

return x

},

getDialogTableData () {

const tableData = []

this. tableData. forEach(( item, index) => {

const obj = {}

obj. id = index

this. dropCol. forEach( e => {

obj[ e. prop] = item[ e. prop] || ''

})

tableData. push( obj)

})

this. tableDataBeigin = tableData

this. tableDataDialog = this. deepCopy( tableData)

},

strSplitFormat () {

let str = ''

this. tableDataDialog. forEach( item => {

delete item. id // 删除拖拽使用的id

const itemArray = Object. values( item)

const strArray = []

itemArray. forEach( val => { // 去除所有空格

strArray. push( val. replace( /\s/ ig, ''))

})

str += strArray + ' \n '

})

this. strSplit = str

},

tableDataFormat () {

const array = this. strSplit. split( ' \n ')

if (! array[ array. length - 1]) {

array. pop()

}

const tableDataDialog = []

array. forEach(( item, index) => {

// 第一步：格式化字符串的内容

const itemNew = item. replace( /\s/ ig, '') // 去除空格

const itemSpace = itemNew. replace( /，/ g, ',') // 将字符串中中文逗号转化为英文逗号

const itemSplit = itemSpace. split( ',') // 将字符串分割成数组

const indexSecond = this. findStrIndex( itemSpace, ',', 1)

let array2 = []

if ( itemSplit. length > 3) { // 只转换第二个逗号前的内容,第三个逗号后面的内容进行合并

array2 = itemSpace. substring( 0, indexSecond). split( ',')

array2. push( item. substring( indexSecond + 1))

} else {

if ( itemSplit. length === 1) { // 只有一个字段

array2 = [ itemNew, this. dropCol[ 1]. prop === 'field_type' ? 'string' : '', '']

} else { // 其他情况

array2 = itemSplit

}

}

// 第二步：将字符串转成成需要的表格数据

const obj = {}

array2. forEach(( eNew, i) => {

obj. id = index

const itemDrop = this. dropCol[ i]. prop

const itemLower = eNew. toLowerCase() // 转换成小写

if ( itemDrop === 'field_type') {

const options = [ 'tinyint', 'smallint', 'int', 'bigint', 'boolean', 'float', 'double', 'string']

obj[ itemDrop] = options. indexOf( itemLower) !== - 1 ? itemLower : 'string'

} else if ( itemDrop === 'field_key') {

const keyOptions = [ 'qq', 'area', 'roleid', 'os', 'commid', 'openid', 'null']

obj[ itemDrop] = keyOptions. indexOf( itemLower) !== - 1 ? itemLower : 'null'

} else { // 其他内容不转换大小写

obj[ itemDrop] = eNew || ''

}

})

tableDataDialog. push( obj)

})

this. tableDataDialog = tableDataDialog

},

handleClickTab ( tab, event) {

if ( tab. name === 'txt') {

this. strSplitFormat()

} else {

this. tableDataFormat()

}

},

saveCallBack ( val) {

this. saveDisabled = val

},

rowDropDialog () {

const tbody = document. querySelector( '#dragTable_sql tbody')

const _this = this

Sortable. create( tbody, {

handle: '.el-icon-rank',

animation: 150,

onEnd ({ newIndex, oldIndex }) {

const currRow = _this. tableDataDialog. splice( oldIndex, 1)[ 0]

_this. tableDataDialog. splice( newIndex, 0, currRow)

}

})

},

submitDialog () { // 提交表单

if ( this. activeName === 'txt') { // 文本编辑内容进行转换

this. tableDataFormat()

}

const tableData = []

this. tableDataDialog. forEach(( item, index) => {

const obj = {}

this. dropCol. forEach( e => {

obj[ e. prop] = item[ e. prop] || ''

})

tableData. push( obj)

})

this. tableDataBeigin = tableData

const arr = tableData. map( item => item[ this. dropCol[ 0]. prop])

console. log( tableData, '提交tableData')

if (( new Set( arr)). size !== arr. length) { // 判断字段是否重名

this. $message. warning( this. dropCol[ 0]. label + '不可重名')

} else {

this. $emit( 'save-drag-table', tableData)

this. dialogVisible = false

}

}

}

}

script >

转载于:https://www.cnblogs.com/wheatCatcher/p/11169988.html