Avue使用中的问题处理

树懒的梦想2023-12-07 10:38

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();
  },