element-ui table表格組件的具體使用
el-table的格式：
<el-table>
<el-table-column>
</el-table-column>
</el-table>
table表格組件的屬性
由於el-table的屬性眾多這里挑常用的說明一下，其他的參見官方網址：https://element.eleme.cn/#/zh-CN/component/table
Table 屬性
:data 顯示的數據(表格中表示的數據)
height 表格的高度(目前常用高度自適應，會隨便給一個值但不能沒有)
:border 是否帶有縱向邊框，true為帶有，false為不帶有
Table 事件
@selection-change='function' 當選擇項發生變化時會觸發該事件(會獲得選中行的數據作為參數)
Table-column 屬性
type 對應列的類型。
如果設置了 selection 則顯示多選框；
如果設置了 index 則顯示該行的索引（從 1 開始計算）；
如果設置了 expand 則顯示為一個可展開的按鈕
label 顯示的標題
prop 對應列內容的字段名，也可以使用 property 屬性
width 對應列的寬度
fixed 列是否固定在左側(left)或者右側(right)，true 表示固定在左側
show-overflow-tooltip 當內容過長被隱藏時顯示 tooltip(常用，相當與自適應寬度)
align 對齊方式(left/center/right) 默認左對齊
el-table-column中的組件
<template slot-scope="scope"></template>
通過scope可以獲取到 row, column, $index 和 store（table 內部的狀態管理）的數據不過一般是用來獲得row中的數據可以用"{row}"來取代"scope"
表格高度自適應
這里提供一種在配置完.js文件與main.js配置之后只需簡單的命令即可實現(可復用性高)
此方法的原作者博客鏈接：https://juejin.cn/post/6844904153534332935
具體實現步驟如下：
新建包src/util/el-table，創建adaptive.js文件與index.js文件，在main.js進行命令的全局部署，之后在頁面中直接調用命令就可以實現表格高度自適應了。
adaptive.js文件
// 設置表格高度
const doResize = async (el, binding, vnode) => {
// 獲取表格Dom對象
const {
componentInstance: $table
} = await vnode
// 獲取調用傳遞過來的數據
const {
value
} = binding
if (!$table.height) {
throw new Error(`el-$table must set the height. Such as height='100px'`)
}
// 獲取距底部距離（用於展示頁碼等信息）
const bottomOffset = (value && value.bottomOffset) || 30
if (!$table) return
// 計算列表高度並設置
const height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset
$table.layout.setHeight(height)
$table.doLayout()
}
export default {
// 初始化設置
bind(el, binding, vnode) {
// 設置resize監聽方法
el.resizeListener = async () => {
await doResize(el, binding, vnode)
}
// 綁定監聽方法到addResizeListener
// addResizeListener(window.document.body, el.resizeListener)
window.addEventListener('resize', el.resizeListener)
},
update(el, binding, vnode) {
doResize(el, binding, vnode)
},
// 綁定默認高度
async inserted(el, binding, vnode) {
await doResize(el, binding, vnode)
},
// 銷毀時設置
unbind(el) {
// 移除resize監聽
// removeResizeListener(el, el.resizeListener)
window.removeEventListener('resize', el.resizeListener)
}
}
index.js文件
import adaptive from './adaptive'
const install = function(Vue) {
// 綁定v-adaptive指令
Vue.directive('adaptive', adaptive)
}
if (window.Vue) {
window['adaptive'] = adaptive
// eslint-disable-next-line no-undef
Vue.use(install)
}
adaptive.install = install
export default adaptive
main.js文件中引入命令
import adaptive from '@/util/el-table'
Vue.use(adaptive)
頁面調用命令
<el-table
ref="table"
:data="tableData"
height="100px" //必寫
v-adaptive="{bottomOffset: 85}" //調用的命令
>
</el-table>
具體實例
<template>
<div class="app-container">
<div class="the-container">
<el-table
ref="multipleTable"
v-adaptive="{bottomOffset: 85}"
:data="tableData"
:border="true"
height="100px"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
show-overflow-tooltip
/>
<el-table-column
prop="date"
label="日期"
show-overflow-tooltip
/>
<el-table-column
prop="name"
label="姓名"
show-overflow-tooltip
/>
<el-table-column
prop="address"
label="地址"
show-overflow-tooltip
/>
<el-table-column
label="操作"
width="100px"
>
<template slot-scope="scope">
<el-button
type="text"
@click="checkRow(scope)"
>查看</el-button>
</template>
</el-table-column>
</el-table>
<div class="page">
<el-pagination
background
layout="prev, pager, next"
:total="1000"
/>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}],
multipleSelection: []
}
},
methods: {
handleSelectionChange(val) {
this.multipleSelection = val
console.log(this.multipleSelection)
},
checkRow(scope) {
console.log(scope)
console.log(scope.row)
}
}
}
</script>
<style lang="scss" scoped>
.app-container{
height: 100%;
background-color: #f1f1f1;
}
.the-container{
padding: 20px;
height: 100%;
background-color: #fff;
}
/*分頁組件的布局(右下角)*/
.page {
position: relative;
min-height: 40px;
padding: 16px 0 0 0;
.el-pagination {
position: absolute;
right: 0;
}
}
</style>
map方法
當我想要取一個數組中每一個元素的一個特定字段的數據時，用for遍歷並不是很方便，map方法便能輕松解決該問題
當對選中的數據某一個具體字段進行操作時可以用map方法來返回一個新數組，會按照順序處理元素，但不會對空數組
進行檢測，不會改變原始數組。
所以handleSelectionChange可以這樣寫（批處理操作可以這樣用）
handleSelectionChange(val) {
this.multipleSelection = val.map((item) => {
return item.name
})
console.log(this.multipleSelection)
}