vue中使用jquery 实现table 拖动改变尺寸

使用 CDN , 降低打包文件的大小

在index.html中  

<script src="https://.../cdns/jquery-1.12.4.min.js"></script>

在 Vue 中使用 jQuery

一旦你引入 jQuery，你可以在 Vue 实例中使用它。有两种主要方式：

1. 使用全局变量 $

jQuery 会自动在全局范围内添加 $ 变量。你可以在 Vue 实例中直接使用 $ 来访问 jQuery 的 API。

例如：

// html 中
// <div id="jq666" ></div>


// vue中
mounted() {
  // 使用 `this.$` 来查找元素 
  const el = $('#jq666');
  
  el.text("  这是用 jquery 添加的新的内容")

  el.css("color","green");
  el.css("padding","36px");
  el.css({"background-color":"yellow","font-size":"36px"});
}

2. 使用 this.$

Vue 实例有一个特殊的属性 this.$，它可以用于访问 jQuery。

例如：

mounted() { 
  // 使用 `this.$` 来查找元素 
  const element = this.$(selector);  
  // 对元素进行操作 
  element.hide(); 
}

提示

• 请确保在项目中只引入一次 jQuery。
• jQuery 会修改全局作用域，所以谨慎使用 $ 变量。
• 考虑使用 Vue.js 本身的特性，而不是过度依赖 jQuery。

使用 colResizable  表格拖动改变列宽

index.html  
<script src="https://.../cdns/jquerys/colResizable-1.6.min.js"></script>

<!-- test.html -->
<div> 
   <div id="jq666"></div>
   <div class="table">
      <!--不用  id="tb666"  -->
      <table ref="tb777" cellspacing="0" border="0" cellpadding="0">
         <thead>
            <tr>
               <th>表头1</th>
               <th>表头2</th>
               <th>表头3</th>
               <th>表头4</th>
               <th>表头5</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
            </tr>
            <tr>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
            </tr>
            <tr>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
            </tr>
            <tr>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
            </tr>
            <tr>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
            </tr>
            <tr>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
            </tr>
            <tr>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
            </tr>
            <tr>
               <td>我的高度不固定我的高度不固定我的高度不固定我的高度不固定我的高度不固定我的高度不固定</td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
            </tr>
            <tr>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
            </tr>
            <tr>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
            </tr>
            <tr>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
            </tr>
            <tr>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
            </tr>
            <tr>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
            </tr>
         </tbody>
      </table>
   </div>
</div>

<!-- test.vue -->
<template src='./test.html'></template> 
<style>
.table {
  overflow: auto;
  width: 400px;
  height: 300px;
  /* 固定高度 */
  border: 1px solid #999;
  border-bottom: 0;
  border-right: 0;
}
table {
  border-collapse: separate;
  table-layout: fixed;
  width: 100%;
  /* 固定寬度 */
}
td,
th {
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  box-sizing: border-box;
  /* 单元格宽高 */
  width: 100px;
  height: 30px;
}
th {
  background-color: lightblue;
}
/* 控制左边固定的核心代码 */
td:nth-child(1),
th:nth-child(1) {
  position: sticky;
  left: 0;
  /* 首行在左 */
  z-index: 1;
  background-color: lightpink;
}
td:nth-child(2),
th:nth-child(2) {
  position: sticky;
  left: 100px;
  z-index: 1;
  background-color: lightpink;
}
/* 控制表头固定的核心代码 */
thead tr th {
  position: sticky;
  top: 0;
  /* 第一列最上 */
}
th:nth-child(1),
th:nth-child(2) {
  z-index: 2;
  background-color: lightblue;
}
</style>
<script>
export default {
  name: "test",
  data() {
    return { 
    };
  },
  methods: { 
  },
  mounted() {
    // 使用 `this.$` 来查找元素 
    const el = $('#jq666');

    el.text("  这是用 jquery 添加的新的内容")

    el.css("color", "green");
    el.css("padding", "36px");
    el.css({ "background-color": "yellow", "font-size": "36px" });

    // let tb = $("#tb666")  // 这个当然可以
    let tb = $(this.$refs.tb777)  //这样才有效!!!!!
    //此处实现表格可拖动改变尺寸 
    tb.colResizable({
      liveDrag: true,//实现实时拖动，可看见拖动轨迹
      draggingClass: "dragging", //防止拖动出险虚标线
    });
  }
};
</script>

http://www.bacubacu.com/colresizable/#rangeSlider colResizable下载地址

table{ 
	table-layout:fixed;/*  需要为fixed */
}