FCAT

Appearance

WARNING

此文档暂未更新

更改行高 ​

html
<el-table 
    :row-style="{ height: '36px' }" 
    :header-cell-style="table_Header_Style" 
    :cell-style="cell_Style" 
    :data="tableData">
    <el-table-column align="center" type="index" label="行次" width="55">
    </el-table-column>
</el-table>
<el-table 
    :row-style="{ height: '36px' }" 
    :header-cell-style="table_Header_Style" 
    :cell-style="cell_Style" 
    :data="tableData">
    <el-table-column align="center" type="index" label="行次" width="55">
    </el-table-column>
</el-table>

修改指定单元格样式 ​

html
<template>
    <el-table :header-cell-style="table_Header_Style" :cell-style="cell_Style" :data="tableData">
        <el-table-column prop="name1" label="项目1">
        </el-table-column>
        <el-table-column prop="name2" label="项目2">
        </el-table-column>
        <el-table-column prop="name3" label="项目3">
        </el-table-column>
    </el-table>
</template>

<script>
    export default {
        methods: {
            table_Header_Style({ row, rowIndex }) { // 表头
                return {
                    padding: '6.5px 4px 6.5px 4px !important',
                    background: '#ECFFF5',
                    color: 'hgbblack'
                }
            },
            cell_Style({ row, clumn, rowIndex, columnIndex }) {
                const rainbowColor = n => { // 表驱动渲染单元格列的颜色
                    const obj = {
                        0: '#E1F5FF',
                    }
                    return obj[n] ? obj[n] : 'rgba(239,239,239,0.3)'
                }
                return {
                    padding: '6.5px 4px 6.5px 4px !important',
                    background: rainbowColor(columnIndex)
                }
            },
        }
    }
</script>
<template>
    <el-table :header-cell-style="table_Header_Style" :cell-style="cell_Style" :data="tableData">
        <el-table-column prop="name1" label="项目1">
        </el-table-column>
        <el-table-column prop="name2" label="项目2">
        </el-table-column>
        <el-table-column prop="name3" label="项目3">
        </el-table-column>
    </el-table>
</template>

<script>
    export default {
        methods: {
            table_Header_Style({ row, rowIndex }) { // 表头
                return {
                    padding: '6.5px 4px 6.5px 4px !important',
                    background: '#ECFFF5',
                    color: 'hgbblack'
                }
            },
            cell_Style({ row, clumn, rowIndex, columnIndex }) {
                const rainbowColor = n => { // 表驱动渲染单元格列的颜色
                    const obj = {
                        0: '#E1F5FF',
                    }
                    return obj[n] ? obj[n] : 'rgba(239,239,239,0.3)'
                }
                return {
                    padding: '6.5px 4px 6.5px 4px !important',
                    background: rainbowColor(columnIndex)
                }
            },
        }
    }
</script>