element vue 纵向滑动条_vue+element实现纵向表格

效果如下图所示

image.png

一、首先element组件是这么写的

:data="data"

border

prop="name"

style="width: 100%">

prop="name"

label='参数名'>

prop="data"

label="参数">

后台传给我的数据是这样的

image.png

但是我们想要实现这种纵向表格，那么我们就需要改造后台传递给我们的数据格式，改成如下格式

data:[

{

name : "任务ID",

data : 9

},

{

name : "任务名称",

data : 'xxxx'

},

]

提钱写好的对象，属性名要跟后台返回给我们属性名相同，后面方便匹配

names: {

name: '任务名称',

id: '任务ID',

dev_type: '设备类型',

sys_ver: '系统类型',

ssh_ip: 'SSH_IP地址',

pkg_type: '升级包类型',

update_method: '升级方式',

time_start_scan: '任务开始时间',

time_end_scan: '任务结束时间',

is_vul: '漏洞对比',

pkg_version: '升级包版本',

is_task: '任务对比',

is_md5: 'MD5计算',

web_task_target: 'WEB扫描目标',

sys_task_target: '系统扫描目标',

pwd_task_target: '口令猜测目标'

}

二、处理后台传过来的数据，封装成我们需要的如上数据格式，我们使用Object.key获取数据的key，和Object.values获取数据的value，并且都会变成数组形式，我们遍历数据的key值，获取每个属性名，在去我们写好的对象里面匹配每个属性名的中文，然后再去通过下标去匹配对应的value，这样就封装成了我们想要的数据

initData() {

const {id} = this.$route.query

const content = (type) => {

this.resultData.push({

name: type

})

return '升级前，升级后选择'

}

const noContent = '升级前，升级后未选择'

this.$axios.get(`update/list/${id}/`).then(res => {

res.data['update_method'] = '0' ? '自动上传' : '手动上传'

res.data['is_md5'] = res.data['is_md5'] ? content('MD5计算对比') : noContent

res.data['is_task'] = res.data['is_task'] ? content('任务结果对比') : noContent

res.data['is_vul'] = res.data['is_vul'] ? content('漏洞对比') : noContent

const nameKey = Object.keys(res.data)

const value = Object.values(res.data)

const newData = nameKey.map((item, index) => ({

name: this.names[item],

data: value[index]

}))

this.data = newData

})

},