VUE-Element组件（七）Table表格

谁践踏了优雅 2022-12-15 03:39 352阅读 0赞

[Element - The world's most popular Vue UI framework][Element - The world_s most popular Vue UI framework]

一、el-table-colunm自定义：scope="scope"

<el-table :data="userList" >
                                <el-table-column property="userName" label="用户名"></el-table-column>
                                <el-table-column v-for="item in columnList" :property="item.columnCode" :label="item.columnLable"></el-table-column>
                                <el-table-column property="school" label="学校"></el-table-column>
                                <el-table-column property="userType" label="类型">
                                    <template scope="scope">
                                        <div v-if="scope.row.userType==01">{
       {scope.row.userType}}</div>
                                        <div v-if="scope.row.userType==02" style="color:red">类型2</div>
                                        <div v-if="scope.row.userType==03">类型3</div>
                                    </template>
                                </el-table-column>
                            </el-table>

二、el-table设置行高以及自定义样式：

element UI里面表格的行高需要自己调整高度和设置padding，直接写style是不行的，里面有 ：

1、row-style （行的 style）

2、header-row-styl   （表头行的 style）

3、cell-style（单元格的 style）

如果设置行高或padding直接在表格中写 :row-style="height:'32px'"形式也能生效，但是会报错，值为字符串形式不对，需要对象或函数等形式，正确写法如下黑体处：

<el-table  border  :span="24"** :row-style="\{height:'32px'\}"** ** :header-row-style="\{height:'32px'\}"  :cell-style="\{padding:'1px'\}"**>

<el-table-column></el-table-column>

</el-table>

如我：

<el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ 
            background:'#538dd5',
            height:'20px',
            padding:'2px',
            color:'#FFFFFF',
            textAlign:'center'
        }"
        :cell-style="{padding: '5px',,fontSize:'10px'}">

同样支持动态写法：

<el-table
                :data="userList"
                style="width: 100%"
                border
                v-scoped
                :class="{ red: originData['userChangeFlag'] }"
                :cell-style="{ color: originData['userChangeFlag'] ? 'red' : 'black' }"
              >

三、宽度设置为百分比：width="25%"无效，需要设置成min-width="25%"

四、label换行：

首先，label前面加：，双引号嵌套单引号，换行用\\n：

:label="'姓名\n年龄'"

再修改css样式：`white-space` --规定段落中的文本不进行换行，`pre-line`–文本中连续的空格会被合并，在遇到换行符`/n` 或者`<br/>`元素的时候会换行

/deep/ .el-form-item__label{
        white-space:pre-line;
    }
    
    //如果是table的话就
    /deep/ .el-table .cell{
        white-space:pre-line;
    }

[Element - The world_s most popular Vue UI framework]: https://element.eleme.cn/#/zh-CN/component/table