vue相關聯的下拉選擇器

基於element元件實現以下效果：

利用@change事件

實現這部分功能的**如下：

<

el-col 
:span
="6"
>
<
div 
class
="el-input el-input--medium el-input-group el-input-group--prepend"
>
<
div 
class
="el-input-group__prepend"
>班組
div>
<
el-select
v-model
="query.search['classid_eq']"
style
="width:100%"
placeholder
="請選擇班組"
@change
="getvalue"
>
<
el-option
v-for
="item in classinfos"
:key
="item.id"
:label
="item.name"
:value
="item.id"
/>
el-select
>
div>
el-col
>
<
el-col 
:span
="6"
>
<
div 
class
="el-input el-input--medium el-input-group el-input-group--prepend"
>
<
div 
class
="el-input-group__prepend"
>小組
div>
<
el-select
v-model
="query.search['groupid_eq']"
style
="width:100%"
placeholder
="請選擇小組"
>
<
el-option
v-for
="item ingroups"
:key
="item.id"
:label
="item.name"
:value
="item.id"
/>
el-select
>
div>
el-col
>

export default

; },
created() ,
methods: 
});},
.............
getvalue() )
.then(res =>}).
catch(res =>{});}}

以分組的顯示分組，未分組的也就是空的預設顯示未分組

所以需要進行值和樣式的判斷：

<

el-table-column 
key="2"
prop
="classname"
label
="所屬班組"
/>
<
el-table-column 
key="3"
prop
="groupname"
label
="所屬小組"
>
<
template 
slot-scope
="scope"
>
<
span
:style
=" scope.row.groupname == null
? 'color:#f23d3d'
: 'color:#606266'
">
}span
>
template
>
el-table-column
>

西安的鬼天氣，十一月了不下雪還下雨，雖然週六也上班，但是還是祝自己生日快樂呀

今天也很想他..................................

vue element下拉樹選擇器

專案需求 輸入框點選彈出樹形下拉結構，可多選或者單選。解決方案 1.使用layui formselect多選外掛程式 2.基於vue elementui 下拉框和樹形控制項組合成樹形下拉結構 data function handlecheckchange data,checked,node let ...

CSS 樣式關聯 選擇器

大體分為三種方式 id選擇器，class選擇器 除此之外還有標籤屬性選擇器 派生選擇器 標籤選擇器 所有的標籤都會受影響 body 網頁會整體變黃色 class屬性選擇器 classname 注意，最前面是乙個點 id選擇器 idname font size 30pt 自定義屬性選擇器 假設你已經在...

Vue 深度選擇器

在使用vue的時候，為了避免元件之間相互影響，可以在樣式中加入乙個css樣式。但是這樣的直接壞處是父元件的樣式不會滲透到子元件中去。vue提供了深度作用選擇器可以解決這個問題 aa 首頁 a breadcrumb item a breadcrumb text a button div templat...