浏览代码

单选维护属性tag显示

zhouna 6 年之前
父节点
当前提交
2eb59396d0
共有 1 个文件被更改,包括 22 次插入9 次删除
  1. 22 9
      src/components/icss/SingleSelect.vue

+ 22 - 9
src/components/icss/SingleSelect.vue

@@ -14,12 +14,13 @@
                 <el-button type="danger" size="small" class="del" @click="delRow">删除</el-button>
             </div>
             <div class="main-area">
-                <el-input v-for="(it,i) in rows"
-                          :key="i"
-                          v-model="rows[i].name"
-                          v-bind:class="{select:focusOn==i}"
-                          @focus="selectRow(i)"
-                          @blur="emitValues"></el-input>
+                <el-col v-for="(it,i) in rows" :key="i">
+                    <el-input v-model="rows[i].name"
+                              v-bind:class="{select:focusOn==i}"
+                              @focus="selectRow(i)"
+                              @blur="emitValues"></el-input>
+                    <el-tag type="info" size="mini" v-if="showTag(it)">{{showTag(it)}}</el-tag>
+                </el-col>
                 <el-button @click="addRow">+</el-button>
             </div>
         </el-form>
@@ -56,11 +57,14 @@
         }
     }
     .main-area{
-        width: 200px;
+        width: 290px;
         margin:20px 150px;
-        .el-input {
+        .el-tag{
+            margin-left: 10px;
+        }
+        .el-col .el-input {
             width: 200px;
-            display: block;
+            display: inline-block;
             &.select{
                 input{
                     border-color: @adminBase;
@@ -78,11 +82,20 @@
       props:['type'],
       data(){
         return {
+          maps:{isBan:'同“伴”',isNone:'同“无”',defaultSelect:'默认选中'},
           rows:[{name:'',defaultSelect:'',isBan:'',isNone:''},{name:'',defaultSelect:'',isBan:'',isNone:''},{name:'',defaultSelect:'',isBan:'',isNone:''},{name:'',defaultSelect:'',isBan:'',isNone:''}],
           focusOn:-1
         }
       },
       computed:{
+        showTag:function(){
+          return function(it){
+            let name = Object.keys(this.maps).find((item)=>{
+              return it[item];
+            });
+            return this.maps[name];
+          }
+        },
         hasDefault:function(){               //是否有选项默认选中
           let index =this.rows.findIndex((it)=>{
             return it.defaultSelect;