1.在表格中如何显示
先了解slot-scope
在组件模板中书写所需slot
插槽,并将当前组件的数据通过v-bind
绑定在slot
标签上。 在组件使用时,通过slot-scope=“scope”
,接收组件中slot
标签上绑定的数据。 通过scope.xxx
就可以使用绑定数据了
< el-table :data = " userList" border style = " width : 100%" > </ el-table>
< el-table-column
align = " center"
prop = " sex"
label = " 性别"
width = " 180" >
< template slot-scope = " scope" >
< span v-if = " scope.row.sex==0" > 女</ span>
< span v-if = " scope.row.sex==1" > 男</ span>
</ template>
</ el-table-column>
data ( ) {
return {
userList : [ {
userId : '' ,
username : '' ,
sex : '' ,
date : '' ,
age : '' ,
address : '' ,
} ] ,
}
2.from表单下拉列表
< el-form-item label = " 用户性别:" :label-width = " formLabelWidth" >
< el-select v-model = " user.sex" placeholder = " 请选择性别" >
< el-option v-for = " (item,key) in sexs" :key = " key" :label = " item.label" :value = " key" >
</ el-option>
</ el-select>
</ el-form-item>
data ( ) {
return {
user : {
userId : '' ,
username : '' ,
sex : '' ,
date : '' ,
age : '' ,
address : '' ,
sexs : [ {
value : '1' ,
label : '男'
} , {
value : '0' ,
label : '女'
} ] ,
}
}