前言
本文章编写的是elementUI的table相关设置。
用于以后进行参考和使用，我将会把它归置在常用工具栏分栏中；以供后续参考；
如后续有新内容将在本文章进行更新
table设置
最基础的表格代码如下
<template>
<el-table
:data="这里为定义的数组"
style="width: 100%">
<el-table-column
prop="数组底下的属性"
label="表格标题"
width="180">
</el-table-column>
</template>
例子
界面
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
数组数据
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
}
}
</script>
效果
表格宽度自适应
如果想实现自适应宽度的话，只需要做如下调整
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
设置el-table的宽度width属性为100%,下面的el-table-column不设置宽度即可
设置表格边框
要实现表格边框，在el-table设置属性border即可
<template>
<el-table
:data="tableData"
style="width: 100%"
border>
<el-table-column
prop="date"
label="日期">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
设置表格固定宽度且省略多余文字
当设置表格为固定宽度的时候，想隐藏多余的文字，如下
<template>
<el-table
:data="tableData"
style="width: 100%"
>
<el-table-column
prop="date"
label="日期">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="address"
label="地址"
:show-overflow-tooltip="true">
</el-table-column>
</el-table>
</template>
在你想要隐藏的栏位进行添加
:show-overflow-tooltip="true"
即可
表格文字居中
要实现表格文字居中，做如下操作
<template>
<el-table
:data="tableData"
style="width: 100%"
>
<el-table-column
prop="date"
label="日期"
align="center">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
在想实现文字居中的栏位使用
align="center"
即可
自定义编写显示表格文本
当想实现自定义编写表格栏位显示的文本内容的时候，你需要先写一个方法，然后把参数传入方法内；
具体操作如下:
<template>
<el-table
:data="tableData"
style="width: 100%"
>
<el-table-column
prop="date"
label="日期"
align="center">
</el-table-column>
<el-table-column label="姓名" width="80">
<template slot-scope="scope">
{{ method1(scope.row.name) }}
</template>
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
在想自定义的地方调用该方法即可;
注意:要自定义文本进行编写方法，必须return一个值出来
例子
method1(name){
let s = "";
if (name == "张三") {
s = "张三";
} else {
s = "李四";
}
return s;
}
表格添加操作栏位
<template>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
prop="date"
label="日期"
align="center">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
<el-table-column
fixed="right"
label="操作">
<template slot-scope="scope">
<el-button @click="method2(scope.row)" type="text" size="small">操作1</el-button>
<el-button @click="method3(scope.row)" type="text" size="small">操作2</el-button>
</template>
</el-table-column>
</el-table>
</template>
结语
以上为本人在elementui表格使用上的操作，如有新内容将进行更新