Element UI 表格如何设置行高?
<template>
<div class'table'>
<el-dialog title='与会情况' :visible.sync='dialogTableVisible'>
<el-table
ref='filterTable'
:data='tableData'
border
:header-cell-style='{ background: '#F9F4F4', color: '#333333' }'
>
<el-table-column prop='name' label='参会人' width='180' align='center'>
</el-table-column>
<el-table-column
prop='role'
label='参会角色'
width='200'
align='center'
>
</el-table-column>
<el-table-column
prop='date'
label='打卡时间'
width='200'
align='center'
>
</el-table-column>
<el-table-column prop='remark' label='备注' align='center'>
</el-table-column>
<el-table-column
prop='tag'
label='状态'
width='200'
align='center'
:filters='[
{ text: '与会', value: '与会' },
{ text: '请假', value: '请假' },
{ text: '缺勤', value: '缺勤' }
]'
:filter-method='filterTag'
filter-placement='bottom-end'
>
<template slot-scope='scope'>
<el-tag
:type='scope.row.tag === '与会' ? 'success' : scope.row.tag === '请假' ? 'warning' : 'danger'
disable-transitions
>{{ scope.row.tag }}</el-tag>
</template>
</el-table-column>
</el-table>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogTableVisible: false,
tableData: [
{
date: '2016-05-02',
name: '张三',
role: '主持人',
remark: 'XXXX1',
tag: '与会'
},
{
date: '2016-05-04',
name: '李四',
role: '演讲人',
remark: 'XXXXX',
tag: '与会'
},
{
date: '2016-05-01',
name: '王五',
role: '',
remark: 'XXXXXX',
tag: '请假'
},
{
date: '2016-05-03',
name: '赵六',
role: '',
remark: 'XXXXX',
tag: '缺勤'
}
]
}
},
methods: {
openDialog() {
this.dialogTableVisible = true
},
clearFilter() {
this.$refs.filterTable.clearFilter()
},
filterTag(value, row) {
return row.tag === value
}
}
}
</script>
<style lang='scss' scoped>
.table {
width: 90%;
margin: auto;
}
.el-table__row {
height: 50px; // 设置行高度为50px
}
</style>
<p>要改变表格每行的高度,可以通过修改表格行的样式来实现。在样式部分的<code>.table</code>选择器下添加如下代码:</p>
<pre><code class="language-scss">.el-table__row {
height: 50px; // 设置行高度为50px
}
</code></pre>
<p>修改后的代码如下:</p>
<pre><code class="language-html"><template>
<div class='table'>
<el-dialog title='与会情况' :visible.sync='dialogTableVisible'>
<el-table
ref='filterTable'
:data='tableData'
border
:header-cell-style='{ background: '#F9F4F4', color: '#333333' }'
>
<!-- 表格列省略 -->
</el-table>
</el-dialog>
</div>
</template>
<script>
export default {
// 省略部分代码
}
</script>
<style lang='scss' scoped>
.table {
width: 90%;
margin: auto;
}
.el-table__row {
height: 50px; // 设置行高度为50px
}
</style>
</code></pre>
<p>通过将<code>.el-table__row</code>选择器下的<code>height</code>属性设置为所需的行高度即可改变表格每行的高度。</p>
原文地址: http://www.cveoy.top/t/topic/qpBr 著作权归作者所有。请勿转载和采集!