SOURCE

Vue.directive('auto-width', {
    update(el, binding, vnode, oldVnode) {
        if (vnode === oldVnode) return
        if (!binding.value) return
        const key = binding.value.key
        if (!key) return
        const columnInstance = vnode.componentInstance
        const fontSize = getComputedStyle(columnInstance.$el)['font-size'].match(/\d+/)[0] || 14
        const data = columnInstance.$parent.tableData
        const maxText = data.reduce((pre, cur) => {
            pre = cur[key].toString().length >= pre.length ? cur[key] : pre
            return pre
        }, '')
        const enMaxText = maxText.match(/[a-zA-Z0-9]/igm) ? maxText.match(/[a-zA-Z0-9]/igm).join('') : ''
        // 中文字符数宽度加上两端各空一个字符再减去非中文字符数除以二
        const width = maxText.toString().length * Number(fontSize) + 2 * Number(fontSize) - enMaxText.length * Number(fontSize) / 2
        columnInstance.width = width
    }
})



new Vue({
    el: '#app',
    data() {
        return {
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: 'JavaScript的 Array 对象是用于构造数组的全局对象，数组是类似于列表的高阶对象。',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: 'taobao',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
            value: ''
        }
    },
    methods: {
        doLayout() {
            this.tableData.push({
                date: '2016-05-04',
                name: 'JavaScript的 Array 对象是用于构造数组的全局对象，数组是类似于列表的高阶对象。' + Date.now(),
                address: '上海市普陀区金沙江路 1517 弄'
            })
        }
    }
})

<div id="app">
	<el-button @click="doLayout">doLayout</el-button>
	<el-table :data="tableData" border ref="table">
		<el-table-column prop="date" align="center" label="日期" v-auto-width="{key: 'date'}">
		</el-table-column>
		<el-table-column prop="name" label="姓名" width="180" v-auto-width="{ key: 'name'}">
		</el-table-column>
		<el-table-column prop="address" label="地址" v-auto-width="{ key: 'address'}">
		</el-table-column>
	</el-table>
	<p>{{value}}</p>
	<el-date-picker v-model="value" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
	</el-date-picker>
</div>