console
var Main = {
data() {
return {
searchValue: '',
loading: false,
tableData: [{
date: '2016-05-03',
name: '王小虎',
province: '重庆',
city: '重庆',
address: '重庆 1518 弄',
zip: 200333,
age: 20,
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333,
age: 10,
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333,
age: 30,
}, {
date: '2016-05-01',
name: '王小虎',
province: '广东省',
city: '珠海区',
address: '珠海区金沙江路 1518 弄',
zip: 200333,
age: 10,
}, {
date: '2016-05-08',
name: '王小虎',
province: '广东省',
city: '珠海区',
address: '珠海区金沙江路 1518 弄',
zip: 200333,
age: 28,
}, {
date: '2016-05-06',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333,
age: 3,
}, {
date: '2016-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333,
age: 88,
}],
cloneTableData: [],
timer: null,
}
},
directives: {
'fit-columns': {
inserted: function () {
setTimeout(() => {
console.log(888)
adjustColumnWidth()
}, 100)
}
}
},
created() {
this.cloneTableData = JSON.parse(JSON.stringify(this.tableData))
},
mounted() {
window.addEventListener('resize', this.handleColumnWidthAndDoLayout, true)
},
beforeDestroy() {
window.removeEventListener('resize', this.handleColumnWidthAndDoLayout, true)
clearTimeout(this.timer)
this.timer = null
},
watch: {
tableData: {
handler(val) {
this.handleColumnWidthAndDoLayout()
},
deep: true
},
},
methods: {
handleSearch() {
if(this.searchValue === '' ) {
this.resetSearch()
return;
}
const canSearch = typeof Number(this.searchValue) === 'number'
if (!canSearch) { return; }
this.loading = true
this.tableData = this.tableData.filter(item => {
return (item.age === Number(this.searchValue))
})
this.loading = false
},
resetSearch() {
this.searchValue = ''
this.tableData = JSON.parse(JSON.stringify(this.cloneTableData))
},
handleColumnWidthAndDoLayout() {
const that = this
this.loading = true
this.timer = setTimeout(() => {
adjustColumnWidth()
this.loading = false
}, 800)
}
}
}
let hash = {}
function handleWidth({ table, resValue }) {
if (!table) { return }
const list = table.querySelectorAll(`col`)
const len = list.length
let gutterIndex = -1
list.forEach((el, index) => {
const isHasGutter = el.getAttribute('name').includes(`gutter`)
if (isHasGutter) {
gutterIndex = index
}
})
const idx = (gutterIndex !== -1) ? len - 2 : len - 1
list[idx].setAttribute('width', resValue)
table.querySelectorAll(`td.el-table__cell > .cell`).forEach(el => {
el.style.width = `${resValue}px`
})
}
function getBtnSumWidth(ele) {
let sumWidth = 0
const arr = []
const len = ele.length
for (let i = 0; i < len; i++) {
if (ele[i].style.display !== 'none') {
const w = ele[i].clientWidth
sumWidth += w
}
arr.push(sumWidth)
}
return arr
}
function getOpeColumnWidth() {
const btnDivEle = document.querySelectorAll('.specificalTable .el-table__fixed-right .btnWrap ')
let arr = []
for (let i = 0; i < btnDivEle.length; i++) {
const btnList = btnDivEle[i].children
arr = [...arr, ...getBtnSumWidth(btnList)]
}
const sum = arr.length ? Math.max(...[...new Set(arr)]) : 0
return sum
}
const PADDING = 56
function adjustColumnWidth(currPage = 1) {
if (currPage === 1) {
hash = {}
}
const headerTable = document.querySelector('.specificalTable .el-table__header-wrapper > .el-table__header')
const normalTableBody = document.querySelector('.specificalTable .el-table__body-wrapper > .el-table__body')
const fixedTableBody = document.querySelector('.specificalTable .el-table__fixed-body-wrapper > .el-table__body')
const fixedRightTable = document.querySelector('.specificalTable .el-table__fixed-right')
const fixedHeaderTable = document.querySelector('.specificalTable .el-table__fixed-header-wrapper > table')
const operateColumnWidth = hash[currPage] ? hash[currPage] : getOpeColumnWidth()
const resValue = operateColumnWidth + PADDING
hash[currPage] = operateColumnWidth
fixedTableBody && (fixedTableBody.style.width = `${resValue}px`)
fixedRightTable && (fixedRightTable.style.width = `${resValue}px`)
handleWidth({ table: headerTable, resValue })
handleWidth({ table: normalTableBody, resValue })
handleWidth({ table: fixedHeaderTable, resValue })
handleWidth({ table: fixedTableBody, resValue })
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
<div id="app">
<template>
<el-input v-model="searchValue" placeholder="请输入年龄查询" style="width: 200px"></el-input>
<el-button type="primary" @click="handleSearch">查询</el-button>
<el-button type="primary" @click="resetSearch">清空</el-button>
<el-table v-loading="loading" v-fit-columns class="specificalTable" :data="tableData" style="width: 100%" height="500">
<el-table-column prop="date" label="日期" width="150">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="age" label="年龄" >
</el-table-column>
<el-table-column prop="province" label="省份" width="120">
</el-table-column>
<el-table-column prop="city" label="市区" width="120">
</el-table-column>
<el-table-column prop="address" label="地址" width="300">
</el-table-column>
<el-table-column prop="zip" label="邮编" width="120">
</el-table-column>
<el-table-column label="操作" fixed="right">
<template slot-scope="scope">
<div class="btnWrap">
<el-button type="primary" v-if="scope.row.age <= 10">退回</el-button>
<el-button v-if="scope.row.age >= 20 && scope.row.city === '珠海区'" type="primary">审核</el-button>
<el-button type="primary">编辑</el-button>
<el-button v-if="scope.row.city === '珠海区'" type="danger">删除</el-button>
</div>
</template>
</el-table-column>
</el-table>
</template>
</div>
@import url("//unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css");