Element: [Bug Report] table-column can't set the width as a percentage. What's the good way to do it?

[Moln]

Element UI version

2.3.3

OS/Browsers version

Google

Vue version

2.5.16

Reproduction Link

https://jsfiddle.net/mmx38qxw/1311/

Steps to reproduce

<el-table-column :width="'25%'" prop="a" label="A"></el-table-column>

What is Expected?

<colgroup>
<col name="el-table_1_column_1" width="25%">
</colgroup>

What is actually happening?

<colgroup>
<col name="el-table_1_column_1" width="25">
</colgroup>

[element-bot]

Translation of this issue:

Element UI version

2.3.3

OS/Browsers version

Google

Vue version

2.5.16

Reproduction Link

https://jsfiddle.net/mmx38qxw/1311/

Steps to reproduce

```html

.

What is Expected?

```html

.

What is actually happening?

```html

.

[Leopoldthecoder]

width doesn't support percentage. A possible workaround: https://jsfiddle.net/leopoldthecuber/mmx38qxw/1398/ .

[joernroeder]

@Leopoldthecoder your proposed solution would imply to watch for resize events too.

that's how i do it:

{
  data () {
    return {
      columnWidths: {
        colA: 0.05,
        colB: 0.2,
        colC: 0.5,
        colD: 0.25
      },
      width: {
        colA: 0,
        colB: 0,
        colC: 0,
        colD: 0
      }
    }
  },

  mounted () {
    window.addEventListener('resize', this.calcColumnWidths)
    this.calcColumnWidths()
  },

  beforeDestroy () {
    window.removeEventListener('resize', this.calcColumnWidths)
  },

  methods: {
    calcColumnWidths () {
      const tableWidth = this.$refs.table.$el.clientWidth

      for (let column of Object.keys(this.columnWidths)) {
        this.width[column] = this.columnWidths[column] * tableWidth
      }
    }
  }
}

[wasadigi]

I have encountered the same issue, and found the following information in the documentation: use min-width instead of width. It works in my use case.

From the documentation:

column minimum width. Columns with width has a fixed width, while columns with min-width has a width that is distributed in proportion

http://element.eleme.io/#/en-US/component/table

[mrquokka]

I have encountered the same issue, and found the following information in the documentation: use min-width instead of width. It works in my use case.

From the documentation:

column minimum width. Columns with width has a fixed width, while columns with min-width has a width that is distributed in proportion

http://element.eleme.io/#/en-US/component/table

That's awesome, thank you!