diff --git a/src/resources/components/TsTable/TsTable.md b/src/resources/components/TsTable/TsTable.md
index 70d68652f3f840dcc1914dcab85316d48894e9f6..c2bb87276099ead28d57520f3d0193d40fdf3527 100644
--- a/src/resources/components/TsTable/TsTable.md
+++ b/src/resources/components/TsTable/TsTable.md
@@ -56,7 +56,7 @@ selectedRemain|Boolean|false|否|是否分页保留每一页选中状态|如果
 disabledHover|Boolean|false|否|是否禁用tr移上去背景颜色效果|-
 canEdit|Boolean|false|否|是否可编辑表头|包括显示隐藏行、拖拽排序
 canDrag|Boolean|false|否|是否可拖拽列排序|-
-~~canResize~~|Boolean|false|否|是否可调整行宽|该功能还没开发完成
+canResize|Boolean|false|否|是否可调整行宽|拖拽调整列宽时触发on-column-width-resize(newWidth, oldWidth, column, event)
 sortMulti|Boolean|true|否|是否支持表头多个字段排序|-
 canExpand|Boolean|false|否|是否有展开行查看更多（tr的下一个tr里显示）的功能|需配合expand的插槽使用，每一条数据通过改变_expand属性显示或者收起更多折叠信息
 mode|String|window|否|显示模式|如果是window模式，会使用100vh来计算高度，如果是弹窗中使用，则需要使用dialog模式，则高度变成100%，避免弹窗下有大量留白
diff --git a/src/resources/components/TsTable/TsTable.vue b/src/resources/components/TsTable/TsTable.vue
index de155fbdd751e0c3ba3b688da421cb55f9c38670..6e094f228902242b64c1c9ce5b9cb2ad8636c368 100644
--- a/src/resources/components/TsTable/TsTable.vue
+++ b/src/resources/components/TsTable/TsTable.vue
@@ -14,7 +14,7 @@
         class="bg-table"
       >
         <table class="table-top tstable-body" :style="setLayout" :class="{ fixtop: scrollTop && scrollTop > 0 }">
-          <ColGroup :list="colsList" :canResize="canResize"></ColGroup>
+          <ColGroup :list="$utils.deepClone(colsList)" :canResize="canResize"></ColGroup>
           <THead
             ref="theadRef"
             :columnList="columnList"
@@ -94,7 +94,7 @@
         @mousewheel.stop
       >
         <table ref="tstable" class="table-main tstable-body" :style="setLayout">
-          <ColGroup :list="colsList"></ColGroup>
+          <ColGroup :list="$utils.deepClone(colsList)"></ColGroup>
           <THead
             ref="theadRef"
             :theme="theme"
@@ -293,6 +293,7 @@
           </div>
         </div>
       </Poptip>
+      <div v-show="showResizeLine" ref="resizeLine" class="ivu-table-resize-line"></div>
     </div>
     <div v-if="isBigDataPage" ref="tablepage" class="tstable-page text-right">
       <!-- 大数据模式显示分页数据 -->
@@ -409,7 +410,7 @@ export default {
       default: false
     },
     canResize: {
-      //是否可拖拽改变宽度
+      //是否可拖拽改变宽度,拖拽调整列宽时触发on-column-width-resize(newWidth, oldWidth, column, event)
       type: Boolean,
       default: false
     },
@@ -605,7 +606,8 @@ export default {
       isRendered: true, //表格渲染需要时间导致第一次取值有问题，这里标记是否需要从新计算offsetWidth的值
       resizeEvent: null,
       visible: false, //控制表头排序是否显示的poptip是否显示
-      tableRowStyle: GLOBAL_TABLESTRYLE || (process.env && process.env.VUE_APP_TABLESTRYLE)
+      tableRowStyle: GLOBAL_TABLESTRYLE || (process.env && process.env.VUE_APP_TABLESTRYLE),
+      showResizeLine: false
     };
   },
   beforeCreate() {},
diff --git a/src/resources/components/TsTable/component/table-thead.vue b/src/resources/components/TsTable/component/table-thead.vue
index e765191e1055bb548e343e22e7d664de780396f1..3d98cc1d3daa461dac6fee35114391f2b913065a 100644
--- a/src/resources/components/TsTable/component/table-thead.vue
+++ b/src/resources/components/TsTable/component/table-thead.vue
@@ -49,7 +49,12 @@
               <span v-if="getSort(hitem)" :class="setSortclass(hitem,sortConfig)" @click="switchStatus(hitem)"></span>
             </div>
           </slot>
-          <div v-if="canResize" class="btn-resize"></div>
+          <div
+            v-if="canResize"
+            class="btn-resize"
+            @mousedown="handleMouseDown(hitem, $event)"
+            @mousemove="handleMouseMove(hitem, $event)"
+          ></div>
         </template>
       </th>
     </tr>
@@ -96,7 +101,10 @@ export default {
   },
   data() {
     return {
-      scrollLeft: 0
+      scrollLeft: 0,
+      draggingColumn: null,
+      dragging: false,
+      dragState: {}
     };
   },
   beforeCreate() {},
@@ -155,6 +163,91 @@ export default {
     },
     switchStatus(item) {
       this.$emit('switchStatus', item);
+    },
+    handleMouseDown(column, event) {
+      if (this.draggingColumn) {
+        this.dragging = true;
+
+        const table = this.$parent;
+        const tableEl = table.$el;
+        const tableLeft = tableEl.getBoundingClientRect().left;
+        const columnEl = this.$el.querySelector(`.th-${column.key}`);
+        const columnRect = columnEl.getBoundingClientRect();
+        const minLeft = columnRect.left - tableLeft + 30;
+
+        table.showResizeLine = true;
+
+        this.dragState = {
+          startMouseLeft: event.clientX,
+          startLeft: columnRect.right - tableLeft,
+          startColumnLeft: columnRect.left - tableLeft,
+          tableLeft
+        };
+
+        const resizeProxy = table.$refs.resizeLine;
+        resizeProxy.style.left = this.dragState.startLeft + 'px';
+
+        document.onselectstart = function() {
+          return false;
+        };
+        document.ondragstart = function() {
+          return false;
+        };
+
+        const handleMouseMove = event => {
+          const deltaLeft = event.clientX - this.dragState.startMouseLeft;
+          const proxyLeft = this.dragState.startLeft + deltaLeft;
+
+          resizeProxy.style.left = Math.max(minLeft, proxyLeft) + 'px';
+        };
+
+        const handleMouseUp = () => {
+          if (this.dragging) {
+            const { startColumnLeft, startLeft } = this.dragState;
+
+            const finalLeft = parseInt(resizeProxy.style.left, 10);
+            const columnWidth = finalLeft - startColumnLeft;
+
+            const _column = table.colsList.find(item => item.key === column.key + 'Width');
+            if (_column) {
+              this.$set(_column, 'width', columnWidth);
+            }
+            table.$emit('on-column-width-resize', _column.width, startLeft - startColumnLeft, column, event);
+            this.dragging = false;
+            this.draggingColumn = null;
+            this.dragState = {};
+
+            table.showResizeLine = false;
+          }
+
+          document.removeEventListener('mousemove', handleMouseMove);
+          document.removeEventListener('mouseup', handleMouseUp);
+          document.onselectstart = null;
+          document.ondragstart = null;
+        };
+
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+      }
+    },
+    handleMouseMove(column, event) {
+      let target = event.target;
+
+      while (target && target.tagName !== 'TH') {
+        target = target.parentNode;
+      }
+
+      if (!column || !this.canResize) return;
+
+      if (!this.dragging) {
+        let rect = target.getBoundingClientRect();
+
+        if (rect.width > 12 && rect.right - event.pageX < 8) {
+          this.draggingColumn = column;
+        } else if (!this.dragging) {
+          this.draggingColumn = null;
+        }
+      }
     }
   },
   computed: {