账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue+element怎么实现表格中下拉栏接收数据
    • 2020-01-01 00:00
    • 11
    49
    0

    问题描述

     这是一个表格组件,表格中嵌套了一个多选下拉,表格中其他数据读取的是一张表,但下拉栏读取的是另一张表。表格本身能通过读取读书自动建列,下拉栏也通过scope做到自动创建,但是关键的数据怎么传进去不清楚,我从后台获取了对象字符串,但是我怎么能把字符串自动放到每一行中并绑定下拉栏的值呢(需要把后台的值传到下拉栏label中,而不是下拉栏选项option里)
    

    问题出现的环境背景及自己尝试过哪些方法

    相关代码

    // 请把代码文本粘贴到下方(请勿用图片代替代码)

          <el-table stripe :data="gridData.content" class="mt-10" height="calc(100vh - 270px)"
                v-loading="ServiceController.pagingByCriteria.loading">
        <el-table-column prop="application.name" label="系统名称"></el-table-column>
        <el-table-column prop="name" label="API名称"></el-table-column>
        <el-table-column prop="path" label="API path"></el-table-column>
        <el-table-column prop="schemes" label="URL schemes"></el-table-column>
        <el-table-column prop="state" label="服务状态"></el-table-column>
        <el-table-column label="环境">
         <template slot-scope="scope">
            <el-select v-model="scope.row.environment" multiple collapse-tags placeholder="请选择">
              <el-option
                 v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
               </el-option>
             </el-select>
           </template>
        </el-table-column>
        <el-table-column  label="操作">
          <template slot-scope="scope">        
           <el-button type="text" icon="el-icon-edit" v-permission="FuncCode.cof_f_sam_edit" @click="openEdit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    

    你期待的结果是什么?实际看到的错误信息又是什么?

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 愛你愛到痛徹心扉 普通会员 1楼

      在Vue中,我们可以使用Element UI的Table组件来实现表格中下拉栏接收数据。首先,你需要安装Element UI库,可以通过npm或yarn进行安装:

      bash npm install element-ui

      或者

      bash yarn add element-ui

      然后,你可以在你的组件中使用Table组件,并设置其下拉栏:

      ```html

      ```

      在这个例子中,我们首先设置了Table组件的宽度为100%,然后添加了下拉栏,并设置了其位置和触发方式。当用户点击下拉栏的某个选项时,它会弹出一个下拉框,用户可以在其中输入数据。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部