el-table自适应缩放大小

安装依赖

npm install --save vue-draggable-resizable
//或
cnpm install --save vue-draggable-resizable

main.js引入依赖

import VueDraggableResizable from 'vue-draggable-resizable'
import "vue-draggable-resizable/dist/VueDraggableResizable.css";
Vue.component('vue-draggable-resizable', VueDraggableResizable)

在这里插入图片描述
demo：


<template><vue-draggable-resizable:h="height":w="width"@resizing="handleResize"><el-table:data="tableData"height="100%"borderstyle="width: 100%"><el-table-columnlabel="日期"prop="date":show-overflow-tooltip="true"></el-table-column><el-table-columnlabel="姓名"prop="name":show-overflow-tooltip="true"></el-table-column><el-table-columnlabel="地址"prop="address":show-overflow-tooltip="true"></el-table-column></el-table></vue-draggable-resizable>
</template><script>
export default {data() {return {width: 300,height: 300,tableData: [{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄"},{date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄"},{date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄"},{date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄"}]};},methods: {handleResize(left, top, width, height) {this.height = height;}}
};
</script>