vue+element实现纵向表格

效果如下图所示

image.png

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

 <el-table
        :data="data"
        border
        prop="name"
        style="width: 100%">
        <el-table-column
          prop="name"
          label='参数名'>
        </el-table-column>

        <el-table-column
          prop="data"
          label="参数">
        </el-table-column>
      </el-table>

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

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
        })
      },

最后编辑于：2020.09.02 17:36:41