[Vue.js] element ui table column 동적 width

element ui 에서 table 에 대한 width 에 퍼센트를 주니까 작동을 하지 않았다. element ui 물론 퍼센트를 대체하기 위해 min-width 를 제공하는데 솔직히 퍼센트가 더 편하다.

그래서 스택오버플로우 검색해보니까 퍼센트는 아니지만 조금 다른 방법으로 동적으로 width 가 작동되도록 하는 법을 알게 되었다.

<el-table ref="userTable">

<el-table-column label="하이~" :width="tableMiniColumnWidth">

</el-table-column>

</el-table>

...

data() {

return{

tableMiniColumnWidth: 0,

tableMiniColumnWidth: 0

}

},

mounted() {

this.tableMiniColumnWidth= Math.round(this.$refs.userTable.$el.clientWidth/ 10)

this.tableMiniColumnWidth= Math.round(this.$refs.userTable.$el.clientWidth/ 7)

}

이런 식으로 해주면 된다. 조금 그렇긴 하지만,,,,