vue动态显示列表内容代码片段-蒲公英云

vue动态显示列表内容代码片段

vue动态显示列表内容代码片段
下拉显示：
search.departid代表绑定的数据
departlist为要显示的列表名，在获取到后端数据后赋值

<div class="col-xs-2">
            <div class="input-group">
              <span class="input-group-addon">机构名称:</span>
              <select class="form-control" v-model="search.departid">
                <option v-for="item in departlist" :key="item.id" :value="item.id">{
   {item.name}}</option>
              </select>
            </div>
 </div>

效果：
1.0

在表单中显示：

<el-table-column label="图片" prop="photos" resizable show-overflow-tooltip>
             <template slot-scope="scope">
              <span v-for="photo in scope.row.photos" :key="photo">
                　<img :src="'images/upload/'+photo" width="60" height="60" class="head_pic" />
              </span>
            </template>
          </el-table-column>

或<el-collapse v-model="activeNames" @change="handleChange"> <el-table ref="multipleTable" :data="userlist" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column label="机构人员" > <template slot-scope="scope">{ { scope.row.name }}</template> </el-table-column> <el-table-column prop="departmentDO.name" label="所属机构" width="120"> </el-table-column> </el-table> </el-collapse>