10_ElementUI 复合型输入框input

一只嘉祺

已于 2024-07-25 16:14:02 修改

阅读量801

点赞数 17

分类专栏： Vue 文章标签： elementui 前端 javascript

于 2024-07-25 16:12:24 首次发布

本文链接：https://blog.csdn.net/2302_77229739/article/details/140692739

版权

Vue 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

10_ElementUI 复合型输入框input输入框中嵌套button按钮

1、Element ui中给出的案例
2、正确的编写方式
3、错误的编写方式
4、如果出现报错

1、Element ui中给出的案例

在这里插入图片描述

<div>
  <el-input placeholder="请输入内容" v-model="input1">
    <template slot="prepend">Http://</template>
  </el-input>
</div>
<div style="margin-top: 15px;">
  <el-input placeholder="请输入内容" v-model="input2">
    <template slot="append">.com</template>
  </el-input>
</div>
<div style="margin-top: 15px;">
  <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
    <el-select v-model="select" slot="prepend" placeholder="请选择">
      <el-option label="餐厅名" value="1"></el-option>
      <el-option label="订单号" value="2"></el-option>
      <el-option label="用户电话" value="3"></el-option>
    </el-select>
    <el-button slot="append" icon="el-icon-search"></el-button>
  </el-input>
</div>
<style>
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
<script>
export default {
  data() {
    return {
      input1: '',
      input2: '',
      input3: '',
      select: ''
    }
  }
}
</script>

2、正确的编写方式

在这里插入图片描述

       <el-table-column label="科目编码" width="170px" align="center" prop="subjectCode">
              <template #default="{ row }">
                <el-input :disabled="inputDisabled" v-model="row.subjectCode" size="small">
                  <template #append>
                    <el-button size="mini" type="primary"  
                    @click="selectsubjectCode(row)">查看</el-button>
                  </template>
                </el-input>
              </template>
            </el-table-column>

3、错误的编写方式

            <el-table-column label="科目编码" width="170px" align="center" prop="subjectCode">
              <template #default="{ row }">
                <el-input-group>
                  <el-input :disabled="inputDisabled" v-model="row.subjectCode" size="small">
                    <template #append>
                      <el-button size="mini" type="primary"
                        @click="selectsubjectCode(row)">查看</el-button>
                    </template>
                  </el-input>
                </el-input-group>
              </template>
            </el-table-column>

4、如果出现报错

Unknown custom element: el-input-group - did you register the component >correctly? For recursive components, make sure to provide the “name” option.
如下图

在这里插入图片描述

需要从你的模板中移除 el-input-group 标签，因为Element UI的 el-input 组件直接支持在输入框旁边添加按钮，无需使用 el-input-group
改成第二点正确的编写方式

这样修改后，你的代码应该不再抛出关于 el-input-group 的错误，并且每个“科目编码”列下的单元格都将显示一个带有“查看”按钮的小型输入框。当用户点击“查看”按钮时，selectsubjectCode方法会被调用，并传入当前行的数据row。确保你的Vue应用已经正确导入并使用了Element UI库，这样才能正常使用 el-input 和 el-button 组件。