899 Star 4K Fork 1.3K

GVPsmallwei / Avue

 / 详情

2.8.12 复杂表头 使用formslot:true 进行行编辑组件扩展,放children 里的column 无法正常渲染编辑组件,移出来就可以使用

Done
Opened this issue  
2021-05-27 16:49

Avue版本 2.8.12
代码:avue 配置参数:
放外面的筛选条件可以正常使用form自定义列,children 中的不能正常渲染出input

export function getSubCrudOption(rowData) {

    let { $sourceEventtypeId: sourceEventName, $targetEventtypeId: targetEventName } = rowData;
    let gridColumn = [
        {
            label: '筛选条件',
            prop: 'sourcefilter',
            formslot: true,
            cell: true
        },
        {
            label: sourceEventName,
            children: [{
                label: '筛选条件',
                prop: 'sourcefilter',
                formslot: true,
                cell: true
            }, {
                label: '分组条件',
                prop: 'sourcegroup',
                formslot: true,
                cell: true
            }, {
                label: '取值规则',
                prop: 'sourcevalue',
                formslot: true,
                cell: true
            }]
        },
        {
            label: targetEventName,
            children: [{
                label: '筛选条件',
                prop: 'targetfilter',
                formslot: true,
                cell: true
            }, {
                label: '分组条件',
                prop: 'targetgroup',
                formslot: true,
                cell: true
            }, {
                label: '取值规则',
                prop: 'targetvalue',
                formslot: true,
                cell: true
            }]
        },
        {
            prop: "remark",
            label: "备注",
            minWidth: 150,
            cell: true
        },
    ];
    let option = {
        height: 'auto',
        calcHeight: 80,
        align: 'center',
        excelBtn: false,
        tip: false,
        searchShow: false,
        refreshBtn: false,
        columnBtn: false,
        menu: false,
        searchMenuSpan: 6,
        highlightCurrentRow: false,
        editBtn: false,
        addBtn: false,
        delBtn: false,
        border: true,
        index: true,
        selection: false,
        searchIcon: false,
        dialogClickModal: false,
        column: gridColumn
    };
    return option;
}

Comments (10)

fsconline created任务
fsconline set related repository to smallwei/Avue
fsconline changed description
展开全部操作日志

发完整代码

包括template部分的

<template>
  <div>
    <el-drawer
      append-to-body
      class="avue-dialog"
      size="70%"
      :fullscreen="fullscreen"
      :close-on-click-modal="false"
      :visible.sync="visible"
      @close="cancelFormSubmit"
    >
      <div slot="title" class="avue-crud__dialog__header">
        <span class="el-dialog__title">配置规则</span>
        <div class="avue-crud__dialog__menu">
          <el-button size="small" type="primary" @click="dataFormSubmit()"
            >确定</el-button
          >
        </div>
      </div>

      <avue-crud
        ref="subCrud"
        :option="subCrudOption"
        :data="data"
        :table-loading="dataListLoading"
        @row-update="addUpdate"
      >
        <template slot="sourcefilterForm" slot-scope="{ row, disabled }">
          <el-input
            v-model="row.sourcefilter"
            size="small"
            :disabled="disabled"
          ></el-input>
        </template>

        <template slot="sourcegroupForm" slot-scope="{ row, disabled }">
          <el-input
            v-model="row.sourcegroup"
            size="small"
            :disabled="disabled"
          ></el-input>
        </template>
      </avue-crud>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="cancelFormSubmit()">取消</el-button>
        <el-button size="small" type="primary" @click="dataFormSubmit()"
          >确定</el-button
        >
      </span>
    </el-drawer>
  </div>
</template>
<script>

export default {
  data() {
    return {
      dataListLoading: false,
      visible: false,
      fullscreen: false,
      selEdit: {},
      // 字段映射规则
      subCrudOption: {},
      dataForm: {},
      data: [{$cellEdit:true},{$cellEdit:true},{$cellEdit:true},{$cellEdit:true},{$cellEdit:true},{$cellEdit:true},{$cellEdit:true},],
      delData: [], //待删除
    };
  },
  components: {
  },
  activated() { },
  methods: {
    // 获取数据列表
    init(selRow, subDatas) {
      // 默认字段映射
      this.mappingTabInit(selRow, subDatas);
      this.dataForm = selRow;
      this.selEdit = {};
      this.$nextTick(() => {
        this.visible = true;
      });
    },
    // 表单提交
    dataFormSubmit() {
      let param = {};
      param.entity = this.dataForm;
      param.sublist = {
        convertruleMapList: this.data,
      };
      // 触发父组件的自定义事件
      this.$emit("row-update", param, () => {
        this.visible = false;
        this.dataForm = {};
        this.data = [];
        this.delData = [];
        this.$emit("getList");
      });
    },
    // 取消表单
    cancelFormSubmit() {
      this.visible = false;
      this.dataForm = {};
      this.data = [];
      this.delData = [];
    },
    /**
     * 字段映射配置初始化
     */
    mappingTabInit(entity, subList) {
      let crudOpt = this.getSubCrudOption(entity);

      this.subCrudOption = crudOpt;
      // this.data = subList;
    },
     getSubCrudOption(rowData) {

    let { $sourceEventtypeId: sourceEventName, $targetEventtypeId: targetEventName } = rowData;
    let gridColumn = [
        {
            label: '筛选条件',
            prop: 'sourcefilter',
            formslot: true,
            cell: true
        },
        {
            label: sourceEventName,
            children: [{
                label: '筛选条件',
                prop: 'sourcefilter',
                formslot: true,
                cell: true
            }, {
                label: '分组条件',
                prop: 'sourcegroup',
                formslot: true,
                cell: true
            }, {
                label: '取值规则',
                prop: 'sourcevalue',
                formslot: true,
                cell: true
            }]
        },
        {
            label: targetEventName,
            children: [{
                label: '筛选条件',
                prop: 'targetfilter',
                formslot: true,
                cell: true
            }, {
                label: '分组条件',
                prop: 'targetgroup',
                formslot: true,
                cell: true
            }, {
                label: '取值规则',
                prop: 'targetvalue',
                formslot: true,
                cell: true
            }]
        },
        {
            prop: "remark",
            label: "备注",
            minWidth: 150,
            cell: true
        },
    ];
    let option = {
        height: 'auto',
        calcHeight: 80,
        align: 'center',
        excelBtn: false,
        tip: false,
        searchShow: false,
        refreshBtn: false,
        columnBtn: false,
        menu: false,
        searchMenuSpan: 6,
        highlightCurrentRow: false,
        editBtn: false,
        addBtn: false,
        delBtn: false,
        border: true,
        index: true,
        selection: false,
        searchIcon: false,
        dialogClickModal: false,
        column: gridColumn
    };
    return option;
}

  },
};
</script>

<style>
</style>

smallwei changed issue state from 待办的 to 进行中

输入图片说明
输入图片说明
输入图片说明
测试没问题

老大,您测试错了。 我说的场景是:复杂表头情况下的 行编辑扩展。不是弹编辑框。
您用我的代码测一下就知道了 $cellEdit:true 是行编辑状态。


<avue-crud
      :option="crudOption"
      :data="data"
      v-model="form"
      ref="crud"
    >
      <template slot="menuLeft">
        <el-button
          icon="el-icon-plus"
          type="primary"
          size="small"
          v-if="permission.mapping_add"
          @click="onBtnAddHandel"
          >新增</el-button
        >
      </template>
    </avue-crud>
<modal-editor ref="editorDlg"></modal-editor>
<script>
import modalEditor from "./modal-editor";
onBtnAddHandel() {
    this.$refs.editorDlg.init({}, {}); //调用就能打开
}
</script>

输入图片说明

smallwei changed issue state from 进行中 to 已完成
fsconline changed issue state from 已完成 to 待办的

行编辑状态下加卡槽加Form和弹出表单用法一致

smallwei changed issue state from 待办的 to 已完成

我在没有复杂表头的情况下 卡槽是好使的。您看我截图 设置的相同的列 一个在复杂表头外可以正常渲染出input 但是放在children里 input就渲染不出来了。
输入图片说明

哥。我好想找到问题了,我看源码猜的,不知道对不对:
您源码里获取formsolt
输入图片说明
这里没有加children
输入图片说明

哥,我刚又测试了一下,确实 form弹出表单 是能正常扩展的, 但是 列表行编辑状态的卡槽 在children 里的column确实不能正常使用卡槽
输入图片说明
输入图片说明

fsconline changed issue state from 已完成 to 待办的
smallwei changed issue state from 待办的 to 进行中
smallwei changed issue state from 进行中 to 已完成
smallwei set milestone to v2.8.13

Sign in to comment

状态
Assignees
Milestones
Pull Requests
关联的 Pull Requests 被合并后可能会关闭此 issue
Branches
Planed to start   -   Planed to end
-
Top level
Priority
参与者(2)
632261 smallweigit 1588214431
JavaScript
1
https://gitee.com/smallweigit/avue.git
git@gitee.com:smallweigit/avue.git
smallweigit
avue
Avue

Search

102255 3a0e046c 1850385 102255 7aaa926c 1850385