Element UI Table Issue with Fixed Column and Expanded Rows

A workaround to solve the Element UI el-table issue when expanded rows and fixed columns are applied together.

by Huasheng Wang

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<script src="//wzrd.in/standalone/vue-resize-directive@latest"></script>
<div id="app">
<template>
  <div class="demo">
    <h2>el-table Problem with Fixed Columns + Expands</h2>

    <h3>Default</h3>

    <el-table id="demo1"
        :data="tableData"
        border
        style="width: 100%"
    >
        <el-table-column
          fixed
          type="expand"
        >
          <template scope="props">
            <h3>Description</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque laoreet cursus ex, nec facilisis sem pretium placerat. Aliquam placerat augue id quam porttitor sollicitudin. Duis id leo ut elit sodales pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis dignissim tincidunt volutpat. Integer vel bibendum ligula. Integer eu lacinia nisi. Morbi ornare commodo venenatis.</p>
            <p>Curabitur efficitur lectus justo, eu euismod nisi pellentesque facilisis. Aliquam eu orci sapien. Etiam tincidunt ornare quam, at malesuada massa convallis sit amet. Aenean et justo sed augue finibus feugiat. Sed et turpis non risus suscipit congue. Nunc pharetra a nulla quis dignissim. Duis mattis pharetra enim, sed suscipit ante dictum in. Morbi ultrices egestas orci vel consequat. Suspendisse fringilla dui ex, eu sodales nibh pretium a. Vivamus sit amet diam egestas, vulputate erat non, accumsan velit. Aenean faucibus mi et sem sodales commodo. Nulla nisi leo, elementum at tempus vel, scelerisque vulputate sem.</p>
          </template>
        </el-table-column>
        <el-table-column
            fixed
            type="selection"
            class-name="selection"
            sortable
            width="55"
        >
        </el-table-column>
        <el-table-column
          prop="date"
          label="Date"
          width="150">
       ...

CSS

@import url("//unpkg.com/element-ui/lib/theme-default/index.css");

#demo2 .el-table__expanded-cell {
  z-index: 999;
  padding: 0;
}

#demo2 .el-table__expanded-cell .expand-area-wrapper {
  padding: 20px 50px;
  overflow-x: hidden; 
  border: 1px solid #dfe6ec;
 }

Babel + JSX

var Main = {
  data () {
    return {
      expands: [],
      loaded: false,
      tableData: [
        {
          key: 'R-0001',
          date: '2016-05-03',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036'
        }, {
          key: 'R-0002',
          date: '2016-05-02',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036'
        }, {
          key: 'R-0003',
          date: '2016-05-04',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036'
        }, {
          key: 'R-0004',
          date: '2016-05-01',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036'
        }
      ]
    } // end return
  }, // END: data

  directives: {
    resize: 'vue-resize-directive'
  },

  computed: {
    scrollTargetElem: function () {
      let targetTable = this.$refs.demo2
      if (this.loaded && targetTable) return targetTable.$el.getElementsByClassName('el-table__body-wrapper')[0]
      return
    }
  }, // END computed

  watch: {
    expands: function (arr) {
      if (arr.length === 0 && !!this.scrollTargetElem) {
        this.scrollTargetElem.removeEventListener('scroll', this.scrollEventHandler, false)
      }
    }
  }, // END watch

  methods: {
    getRowKeys (row) {
      return row.key
    },

    onResize (ev) { 
        console.log('onResize')
        if (this.expands.length > 0) {
          let elems = document.getElementsByClassName('el-table__expanded-cell')
          let width = ev.clientWidth
          for (let elem of Array.from(elems)) {
            elem.firstChild.style.width = width + 'px'
          }
   ...