el-table拖拽宽度然后存储

	<div id="app">
	  <el-table :border="true"  @header-dragend="handleDrag" ref="testTabel"
      :data="tableData"
      style="width: 100%">

      <el-table-column :resizable="true"  v-for="it in tableColumns" :key="it.prop"
        :prop="it.prop" align="center" :formatter="it.formatter"
        :label="it.label"
        :width="it.width">
      </el-table-column>
    
    </el-table>
	

   </div>



	<script>
		new Vue({
			el:'#app',
			data:{
				tableColumns:[
					{
						prop:'date',
						label:'日期',
						width:'180',
					},
					{
						prop:'name',
						label:'姓名',
						width:'180'
					},
					{
						prop:'sex',
						label:'性别',
						width:'180',
						formatter(row, column){
							return row.sex==1?'man':'women'
						}
					},
					{
						prop:'address',
						label:'地址',
						width:'180'
					},
				],
				 tableData: [{
		            date: '2016-05-02',
		            name: '王小虎',
		            sex: '1',
		            address: '上海市普陀区金沙江路 1518 弄'
		          },{
		            date: '2016-05-03',
		            name: '王小虎',
		            sex: '0',
		            address: '上海市普陀区金沙江路 1516 弄'
		          }]
			},
			mounted(){
				let testTabel=localStorage.getItem('testTabel')
				if(testTabel){
					this.tableColumns =Object.assign([], this.tableColumns, JSON.parse( testTabel ) );
				}
				
			},
			methods:{
				handleDrag(newWidth, oldWidth, column, event){
					this.tableColumns.forEach( (item)=>{
						if( item.prop == column.property ){
							item.width=column.width;
						    
							return;
						}
					} );
					localStorage.setItem('testTabel', JSON.stringify( this.tableColumns ) );
				}
			}
		})
</script>