- 这是部分参数,其余可参考element-ui官方文档
2产品要求
3只复制官方文档代码
<el-table
:data="dataList"
align="center"
stripe>
<el-table-column
align="center"
prop="duty">
</el-table-column>
<el-table-column
align="center"
prop="guard">
</el-table-column>
</el-table>
data里数据:
dataList: [
{
duty: '责任',
guard: '预防',
accident: '意外',
base: '基础',
import: '重大'
},
{
duty: '赔付金额',
guard: '3000',
accident: '1000',
base: '2000',
import: '4000'
}]
效果就是
注:会发现多了一行表头,另外俩行不居中,这时可以用show-header的布尔值来控制,设置为false后就下下面的效果(没改边框问题),fit参数控制列宽是否自撑开,我设为了false
4 默认纵向边框border是false,于是我没加border,结果就是
5此时就需要f12调试来改样式了,需注意的是element-ui写右下border的时候用了伪类,不要在当前组件的scoped下改样式,会不起作用,在全局样式或公共样式表中改(为了不影响其他组件,可以在加一级base)就可以达到产品要求
.el-table--border td{
border-right: none;
}
.el-table::before{
height:0;
}
.base .el-table__body{
border-top: 1px solid #CCCCCC;
}