Avue使用中的问题处理

1、Avue中Form表单中实现点击输入框右侧的搜索按钮,打开一个弹框

例子如下,左侧一个输入框,右侧一个搜索按钮,点击搜索按钮,打开一个弹框

js 复制代码
column: [
    ...其他配置
    
    {
        label: 'item的左侧名字',
        placeholder: '请选择',
        labelWidth: '25%',
        prop: 'nihao', // 输入框的字段值,数据库的字段.例如字段叫做 nihao
        solt: true, // 使用插槽,自定义样式(重点,必写的)
        slotForm: true, // 使用插槽,自定义样式(重点,必写的)
        rules: [
            {
              required: true,
              message: '必填',
              trigger: 'change'
            }
        ],
        span: 24,
        // display:true, // 该项是否显示,默认是true
    },
]


template里面俄内容
<avue-form
      ref="xxx"
      v-model="formInfo" // formInfo是表单中的所有字段的信息
      :option="option">
      <template slot="projectName">  // projectName 是表单的字段名,即是数据库表中的字段名
        <el-input
          style="width: 100%"
          :disabled="true" // 是否禁止编辑
          v-model="formInfo.projectName" // projectName 是表单的字段名,即是数据库表中的字段名
          placeholder="请输入"></el-input>
      </template>
      
      // 重点,必写的
      <template slot="nihao"> // nihao 是表单的字段名,即是数据库表中的字段名
        <el-input
          readonly="readonly"
          v-model="formInfo.nihao"
          :disabled="true"
          @focus="handleOpenDialog">
          <el-button
            slot="append"
            icon="el-icon-search" // 阿里的字体图标
            :disabled="true"
            @click="handleOpenDialog"></el-button>
        </el-input>
      </template>
</avue-form>

methods中的打开的el-dialog弹框组件
弹框页面 是自己用 el-dialog写的,不是Avue自带的DialogForm弹窗表单
handleOpenDialog() {
    $init 是 materialDialog弹框组件内,写的方法
    this.$refs.materialDialog.$init();
  },
相关推荐
一个不爱写代码的瘦子4 小时前
迭代器和生成器
前端·javascript
拳打南山敬老院4 小时前
漫谈 MCP 构建之概念篇
前端·后端·aigc
前端老鹰4 小时前
HTML <output> 标签:原生表单结果展示容器,自动关联输入值
前端·html
OpenTiny社区4 小时前
OpenTiny NEXT 内核新生:生成式UI × MCP,重塑前端交互新范式!
前端·开源·agent
耶耶耶1114 小时前
web服务代理用它,还不够吗?
前端
Liamhuo4 小时前
2.1.7 network-浏览器-前端浏览器数据存储
前端·浏览器
洋葱头_4 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
前端小书生4 小时前
React 组件渲染
前端·react.js
sjd_积跬步至千里5 小时前
CSS实现文字横向无限滚动效果
前端
维他AD钙5 小时前
前端基础避坑:3 个实用知识点的简单用法
前端