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

àì夳堔傛蜴生んèń 2023-06-03 07:56 16阅读 0赞

**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>`

[1.0]: /images/20230601/0e47dfeda9274d7aa60a1db9d70fc4fe.png

发表评论取消回复

表情：

评论列表（有 0 条评论，16人围观）

还没有评论，来说两句吧...

相关阅读

相关 VsCode添加Vue模版代码片段

文章目录 VsCode添加Vue模版代码片段 1. 复制一段已有要制作模板的Vue代码，比如： 2. 粘贴到下方链接的工具网站，可自动生成

r囧r小猫/ 2024年03月17日 21:06/ 0 赞/ 100 阅读

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

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

àì夳堔傛蜴生んèń/ 2023年06月03日 07:56/ 0 赞/ 17 阅读

相关 VScode创建Vue模板代码-自定义代码片段

前提：vscode中已安装vue 配置模块代码片段： 1. 依次选择 “ File（文件） -> preperences（首选项） -> User Snippets(用户

﹏ヽ暗。殇╰゛Y/ 2022年12月05日 01:35/ 0 赞/ 261 阅读

相关 vscode设置vue代码片段

一、如何设置？ 1. 打开用户片段 ![clipboard.png][] 2. 选择或创建`vue.json`代码片段 ![clipb

╰+攻爆jí腚メ/ 2022年10月27日 12:18/ 0 赞/ 300 阅读

相关 vscode创建vue3用户代码片段

vscode创建vue3用户代码片段 "create": { "prefix": "vue3demo", "body": [

╰+攻爆jí腚メ/ 2022年10月17日 10:41/ 0 赞/ 655 阅读

相关 VScode中Vue快速生成代码片段

首先我们要找到设置（如下图）用户代码片段 ![20181106100412594.png][] 然后我们会看到这样一个框，然后搜索html.json ![20181106

素颜马尾好姑娘i/ 2022年04月18日 00:46/ 0 赞/ 666 阅读

相关列表显示, 内容过长省略显示, 鼠标停留在内容上显示全部内容

<td id="com" title='{ {item.com}}' style="text-overflow: ellipsis; white-spac

男娘i/ 2022年04月17日 05:07/ 0 赞/ 340 阅读

相关代码片段

function p1(){ return new Promise(function(resolve,reject){ setT

╰半夏微凉°/ 2022年03月07日 15:26/ 0 赞/ 289 阅读

相关 VScode用户代码片段——快速生成vue片段

在VScode编译器中，Ctrl + Shift + p 输入：preferences:configure User Snippets ![2019032109073721

偏执的太偏执、/ 2022年03月06日 14:58/ 0 赞/ 431 阅读

相关 vscode创建vue快捷代码片段

（1）打开文件首选项 —> 用户代码片段 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ib

迷南。/ 2022年02月03日 00:55/ 0 赞/ 508 阅读