el-table使用相关问题

1.表头的表格内容居中显示

给el-table标签加上这两句代码

:header-cell-style="{'text-align':'center'}"
:cell-style="{'text-align':'center'}"

2.表格数据是true/false，但是需要显示其他信息，怎么办？

valid是布尔值

<el-table-column
   prop="valid"
    label="是否有效">
    <template slot-scope="scope">
        {{scope.row.valid ? '有效' : '无效'}}
    </template>
</el-table-column>

3.表格固定高度，超出显示滚动条

传送门在这： vue项目中美化滚动条

数据少的时候不显示滚动条

给el-table加上height属性

<el-table
        border
        stripe
        size="mini"
        height="500"
        :data="tableData"
        :header-cell-style="{'color':'#fff','text-align':'center','background':'#409eff'}"
        :cell-style="{'text-align':'center'}"
        style="width: 100%">
        <el-table-column type="selection"></el-table-column>
        <el-table-column
            prop="roleCode"
            label="角色编码">
        </el-table-column>
        <el-table-column
            prop="roleName"
            label="角色名称">
        </el-table-column>
        <el-table-column
            prop="roleType"
            label="角色类型">
            <template slot-scope="scope">
                    <div v-if="scope.row.roleType === 1">系统管理员</div>
                    <div v-if="scope.row.roleType === 2">子管理员</div>
                    <div v-if="scope.row.roleType === 3">普通角色</div>
            </template>
        </el-table-column>
        <el-table-column
            prop="status"
            width="100"
            label="状态">
            <template slot-scope="scope">
                <el-switch
                    v-model="scope.row.status"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                </el-switch>
            </template>
        </el-table-column>
        <el-table-column
            label="操作"
        >
            <template slot-scope="scope">
                <el-tooltip class="item" effect="light" content="编辑" placement="top" :enterable="false">
                    <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="light" content="删除" placement="top"  :enterable="false">
                    <el-button size="mini"  type="danger" icon="el-icon-delete" @click="deleteRole(scope.row)"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="light" content="授权" placement="top"  :enterable="false">
                    <el-button size="mini"  type="warning" icon="el-icon-setting"></el-button>
                </el-tooltip>
            </template>
        </el-table-column>
    </el-table>  

4.根据后台获取的值为1、2、3等类型时候进行中文显示

获取的表格数据

 [
        {id:1,roleCode:'admin',roleName:'管理员',roleType:3,status:false},
        {id:2,roleCode:'visit',roleName:'游客',roleType:3,status:true},
        {id:3,roleCode:'andy',roleName:'安迪',roleType:2,status:false},
        {id:4,roleCode:'test',roleName:'测试',roleType:2,status:true},
        {id:5,roleCode:'Lee',roleName:'老李',roleType:1,status:true},
 ]

<el-table-column
    prop="roleType"
    label="角色类型">
    <template slot-scope="scope">
            <div v-if="scope.row.roleType === 1">系统管理员</div>
            <div v-if="scope.row.roleType === 2">子管理员</div>
            <div v-if="scope.row.roleType === 3">普通角色</div>
    </template>
</el-table-column>

想要的效果

5.某一列内容居中

Table-column Attributes align取值center