Vol开发文档3.5
Series

自定义弹出弹框、多弹出框

生成的页面配置自定义弹出框或多个弹出框

[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中；二选一实现

vue3代码实现

在生成的【表.vue】中文件直接添加

注意：新版本2025.04月更新后才支持在生成的veu文件中写代码

//1.将下面的标签放在view-grid标签后面
<!--弹出框一-->
<vol-box :lazy="true" v-model="model1" title="弹出框1" :width="700" :padding="5">
  <div>弹出1框内容</div>
  <template #footer>
    <div>
      <el-button type="default" size="small" @click="model1 = false">关闭</el-button>
    </div>
  </template>
</vol-box>
<!--弹出框二-->
<vol-box :lazy="true" v-model="model2" title="弹出框1" :width="700" :padding="5">
  <div>弹出2框内容</div>
  <template #footer>
    <div>
      <el-button type="default" size="small" @click="model2 = false">关闭</el-button>
    </div>
  </template>
</vol-box>

//2.将本地的onInit方法替换为下面的所有代码
const model1 = ref(false)
const model2 = ref(false)
//生成对象属性初始化
const onInit = async ($vm) => {
  gridRef = $vm
  gridRef.buttons.splice(3, 0, {
    name: '弹出框1', //按钮名称
    icon: 'el-icon-document',
    type: 'primary',
    plain: true,
    onClick: () => {
      let rows = gridRef.getSelectRows()
      if (!rows.length) return proxy.$message.error('请选中行数据')
      model1.value = true
    }
  })

  //////可参照上面【自定义按钮】配置更多按钮
  //在表格【备注】字段前面添加一个按钮
  let index = columns.findIndex((x) => { return x.field == 'Remark'})
  //添加自定义列
  columns.splice(index, 0, {
    title: '按钮', //按钮名称
    field: '按钮',
    align: 'center',
    render: (h, { row, column, index }) => {
      return 
        <div>
          <el-button
            onClick={($e) => {
              $e.stopPropagation()
              model2.value = true
            }}
            style=" height:23px;padding: 0px 8px !important;"
            type="primary"  plain>
            弹出框2
          </el-button>
        </div>
    }
  })
}
************************************************************************************************************************
[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中；二选一实现

vue2代码(表.jsx)文件实现

文件目录结构

代码实现

jsx代码
import gridHeader from './Demo_Product/Demo_ProductGridHeader.vue';
let extension = {
  components: {
    //查询界面扩展组件
    gridHeader: gridHeader
  },
  methods: {
    onInited() {
      //添加一个页面
      this.buttons.splice(3, 0, {
        name: '弹出框1', //按钮名称
        icon: 'el-icon-document',
        type: 'primary',
        plain: true,
        onClick: ()=> {
          let rows = this.getSelectRows();
          if (!rows.length) {
            return this.$message.error('请选中行数据');
          }
          this.$refs.gridHeader.openModel1(rows);
        }
      });
      //////可参照上面【自定义按钮】配置更多按钮
      //在表格【备注】字段前面添加一个按钮
      let index = this.columns.findIndex((x) => {
        return x.field == 'Remark';
      });
      //添加自定义列
      this.columns.splice(index, 0, {
        title: '按钮', //按钮名称
        field: '按钮',
        align: 'center',
        render: (h, { row, column, index }) => {
          return (
            <div>
              <el-button
                onClick={($e) => {
                  $e.stopPropagation();
                  this.$refs.gridHeader.openModel2(row, column, index);
                }}
                style=" height:23px;padding: 0px 8px !important;"
                size="small"
                type="primary"
                plain
              >
                弹出框2
              </el-button>
            </div>
          );
        }
      });
    }
};
export default extension;
ON THIS PAGE