el-table自适应缩放大小

最新推荐文章于 2024-03-05 09:57:48 发布

Passerby_K

最新推荐文章于 2024-03-05 09:57:48 发布

阅读量1.1k

点赞数

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/Passerby_K/article/details/132274318

版权

安装依赖

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%"
      border
      style="width: 100%"
      
    >
      <el-table-column
        label="日期"
        prop="date"
        :show-overflow-tooltip="true"
       
      ></el-table-column>
      <el-table-column
        label="姓名"
        prop="name"
        :show-overflow-tooltip="true"
       
      ></el-table-column>
      <el-table-column
        label="地址"
        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>