.babelrc
{ "presets": [ ["env", { "modules": false }], "stage-2" ], "plugins": ["transform-runtime"], "env": { "test": { "presets": ["env", "stage-2"], "plugins": ["transform-vue-jsx", "transform-runtime",["import", { "libraryName": "iview", "libraryDirectory": "src/components" }]] } }}
sortMethod: (a, b, type) => type === 'asc' ? a.age > b.age : a.age < b.age
a:比较的第一值 b:比较的第二个值 type:非常重要的值，desc倒序 asc顺序
autocomplete组件按需加载时，报错 transfer，只要在AutoComplete 上加上 transfer就可以了，此时 transfer为true，不加默认就是false
```
//表格页代码
<template>
<Table :columns="columns1" :data="data1" border @mouseenter.native = "dealWithScroll(columns1)"></Table>
</template>
<script>
export default {
data () {
return {
columns1: [
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
key: 'address'
}
],
data1: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park',
date: '2016-10-01'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02'
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
}
]
}
},
methods:{
dealWithScroll(columns) {
this._autoTableWidth(columns);
}
}
}
</script>
//autoTableWidth文件代码，是一个公共方法
export default {
methods: {
_autoTableWidth(columns) {
if(columns && columns.length){
if (this.$el.getElementsByClassName('ivu-table-header') && this.$el.getElementsByClassName('ivu-table-header').length){
let tTD = {}; // 缓存当前操作TH
let headerTable = this.$el.getElementsByClassName('ivu-table-header')[0].getElementsByTagName('TABLE')[0];
let headerColgroup = headerTable.getElementsByTagName('colgroup')[0];
let bodyTable = this.$el.getElementsByClassName('ivu-table-body')[0].getElementsByTagName('TABLE')[0];
let bodyColgroup = bodyTable.getElementsByTagName('colgroup')[0];
let fixIndexs = [];
// let fixWidth='60px'
let maxResizeWidth = 240;
columns.forEach((c, i) => {
if (['index', 'selection', 'expand'].some(s => s === c.type)) {
fixIndexs.push(i);
// headerColgroup.children[i].style.width=fixWidth
// bodyColgroup.children[i].style.width=fixWidth
}
});
Array.prototype.slice.call(headerTable.rows[0].cells, 0).forEach((e, i) => {
if (fixIndexs.some(s => s === i)) {
return;
}
e.onmousedown = (event) => {
if (event.target.nodeName === 'TH' && event.offsetX > event.target.offsetWidth - 6) {
tTD.mouseDown = true;
tTD.oldX = event.x;
tTD.oldWidth = event.target.offsetWidth;
tTD.index = i;
tTD.minResizeWidth = event.target.getElementsByClassName('ivu-table-cell')[0].offsetWidth + 2;
}
};
e.onmouseup = () => {
tTD.mouseDown = false;
tTD.oldWidth = tTD.newWidth;
};
document.onmouseup = () => {
tTD.mouseDown = false;
tTD.oldWidth = tTD.newWidth;
};
e.onselectstart = () => {
return false;
};
e.onmousemove = (event) => {
event.preventDefault();
// 更改鼠标的样式
if (event.target.nodeName === 'TH' && event.offsetX > event.target.offsetWidth - 6 || tTD.mouseDown) {
event.target.style.cursor = 'col-resize';
} else {
event.target.style.cursor = 'default';
}
// 调整宽度
if (tTD.mouseDown) {
tTD.newWidth = tTD.oldWidth + (event.x - tTD.oldX);
tTD.newWidth = tTD.newWidth < tTD.minResizeWidth ? tTD.minResizeWidth : tTD.newWidth;
tTD.newWidth = tTD.newWidth > maxResizeWidth ? maxResizeWidth : tTD.newWidth;
headerColgroup.children[tTD.index].width = tTD.newWidth;
bodyColgroup.children[tTD.index].width = tTD.newWidth;
}
};
});
}
}
}
}
};
//main.js中引入，全局共用，下面引用路径是我项目的，大家自己改
import autoTableWidth from "@/components/common/mixins/autoTableWidth";
Vue.mixin(autoTableWidth);
```
