Avue使用中的问题处理

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

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

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

2、Avue中表格顶部的搜索按钮，始终保持在最右侧

例子如下，无论搜索条件有多少，搜索按钮，始终保持在最右侧

 // 主要是这2行
 // searchMenuSpan: 24, // 顶部搜索按钮所占的位置大小
 // searchMenuPosition: "right", // 顶部搜索按钮位置
 option: {
      height:'auto',
      calcHeight: 30,
      tip: false,// 是否显示表格顶部的当前表格已选择的项数
      searchShow: true,
      searchMenuSpan: 6,
      border: true,
      index: true,
      viewBtn: true, // 表格右侧的查看按钮
      selection: true, // 是否有选择框
      dialogClickModal: false, // 表格的弹窗是否可以通过点击modal关闭
      menuWidth: 100,//表格操作列宽度
      labelWidth:170, // 打开的弹框中搜索项标题宽度
      searchMenuSpan: 24, // 顶部搜索按钮所占的位置大小
      searchMenuPosition: "right", // 顶部搜索按钮位置
      column: [],
 }
          

3、Avue中表格错位的问题

切换页面，列表表格错位（有时刚进入页面也会错位）

方法一：

// 解决AVue表格错位问题
activated () {
  this.$nextTick(() => {
    this.$refs.crud.doLayout()
  })
},
 
// 不行加一下延时试试
setTimeout(() => {
  this.$nextTick(() => {
    this.$refs.crud.doLayout()
  })
}, 100)

方法二：

mounted(){
  this.$nextTick(() => {
    // 表格错位解决方法 crud是<avue-crud ref="crud"></avue-crud>
    this.$refs.crud.refreshTable();
  })

  // 解决Avue框架 顶部搜索项 显示[展开/搜索],不在最右侧的问题
  const trueDom = document.querySelector('.avue-form__group')
  trueDom.lastChild.style = 'width:100% !important; padding: 0px;'
},

方法三：

以上方法都不行，看看是不是设置了table某一列固定，将 fixed属性 去掉