element-ui table表格组件的具体使用
作者：互联网
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)
}
标签：el,name,王小虎,普陀区,element,ui,table,adaptive 来源： https://www.cnblogs.com/shenStudy/p/15332670.html