Element-ui select下拉框默认值-表格条件加颜色及多字段显示处理

本文地址:http://www.04007.cn/article/1011.html

    Element-ui里要给select设定默认值，可以通过v-model绑定select的值，然后设置option的value即可。需要注意的是v-model绑定的值与option选项value值类型需要一致，不然下拉菜单 可能默认显示具体的value值而不是对应的文本。如下示例：本文地址:http://www.04007.cn/article/1011.html,未经许可,不得转载.

<el-form-item>
    <el-select v-model="value">
       <el-option v-for="item in items"  :key="item.id" :label="item.name" :value="item.id"></el-option>
    </el-select>
</el-form-item>

本文地址:http://www.04007.cn/article/1011.html,未经许可,不得转载.

    在进行表格展示的时候，肯定有需要在某些条件下将展示文字颜色特殊处理，比如变为红色，Vue结合Element-ui可以这样实现：本文地址:http://www.04007.cn/article/1011.html,未经许可,不得转载.

<el-table-column label="状态">
	<template scope="scope">
		<span v-if="scope.row.online== 1">在线</span>
		<span v-else style="color: red">离线</span>
	</template>
</el-table-column>

本文地址:http://www.04007.cn/article/1011.html,未经许可,不得转载.

    另外有的时候我们可能想要将多个字段拼接在一个表格中进行展示，这时候就需要借助template标签来实现，示例：本文地址:http://www.04007.cn/article/1011.html,未经许可,不得转载.

<el-table :data="test">
    <el-table-column label="用户">
        <template slot-scope="scope">
            {{scope.row.username}}-{{scope.row.id}}
        </template>
    </el-table-column>
</el-table>

本文地址:http://www.04007.cn/article/1011.html,未经许可,不得转载.

本文地址:http://www.04007.cn/article/1011.html 未经许可,不得转载. 手机访问本页请扫描右下方二维码.

手机扫码直接打开本页面