Element UI 实现竖向表格

Updated on with 0 views and 0 comments

相关数据

  data() {
    return {
      listLoading: false,
      // 原始数据
      list: [],
      // 表头
      headers: [
        {
          prop: 'id',
          label: 'ID'
        },
        {
          prop: 'name',
          label: '名称'
        }
      ]
    }
  }

对数据进行处理

  computed: {
    getHeaders() {
      return this.list.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])
    },
    getValues() {
      if (this.list.length === 0) {
        return null
      }
      const a = this.headers.map(item => {
        return this.list.reduce((pre, cur, index) => Object.assign(pre, { ['value' + index]: cur[item.prop] }), { 'title': item.label })
      })
      // 添加操作栏
      const l = this.list.reduce((pre, cur, index) => Object.assign(pre, { ['value' + index]: cur }), { 'title': '操作' })
      a.push(l)
      return a
    }
  }

展示

    <el-table
      :loading="listLoading"
      style="width: 100%"
      :data="getValues"
      :show-header="false"
      border
    >
      <el-table-column
        v-for="(item, index) in getHeaders"
        :key="index"
        :fixed="index === 0"
        width="155px"
        :prop="item"
      >
        <template slot-scope="scope">
          <div v-if="index === 0" style="font-weight: bold">
            {{ scope.row[item] }}
          </div>
          <div v-if="index !== 0">
            <div v-if="scope.$index !== getValues.length - 1">
              {{ scope.row[item] }}
            </div>
            <div v-if="scope.$index === getValues.length - 1">
              <el-button type="success" size="small" round @click="check(scope.row[item].id)">
                查看
              </el-button>
              <el-button type="primary" size="small" round @click="edit(scope.row[item].id)">
                编辑
              </el-button>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>

↑ ↓