VUE-Element组件（七）Table表格

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-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;
}