vue-iView框架-Table中嵌入输入框、下拉框等


 {
      key: 'name',
      renderHeader: (h) => {
        return h('div', [
          h(
            'span',
            {
              style: {
                color: 'red',
              },
              class: 'mr-5',
            },
            '*'
          ),
          h('span', '步骤名称'),
        ]);
      },
      render: (h, params) => {
        return h('Input', {
          props: {
            value: params.row.name,
            maxlength: '50',
            showWordLimit: true,
          },
          on: {
            input: (val) => {
              this.tableList[params.index].name = val;
            },
          },
        });
      },
    },
    {
      key: 'behavior',
      renderHeader: (h) => {
        return h('div', [
          h(
            'span',
            {
              style: {
                color: 'red',
              },
              class: 'mr-5',
            },
            '*'
          ),
          h('span', '选择行为'),
        ]);
      },
      render: (h, params) => {
        if (params.row.handleActionId === '2') {
          return h('div', [
            h(
              'Select',
              {
                props: {
                  transfer: true,
                  value: params.row.handleActionId,
                },
                on: {
                  'on-change': (event) => {
                    this.tableList[params.index].handleActionId = event;
                  },
                },
              },
              this.behaviorList.map((item) => {
                return h('Option', {
                  props: {
                    value: item.id,
                    label: item.name,
                  },
                });
              })
            ),
            h(
              'Select',
              {
                props: {
                  transfer: true,
                  placeholder: '请选择报表',
                  value: params.row.formId,
                },
                class: 'mt-10',
                on: {
                  'on-change': (event) => {
                    this.tableList[params.index].formId = event;
                  },
                },
              },
              this.reportList.map((item) => {
                return h('Option', {
                  props: {
                    value: item.id,
                    label: item.content,
                  },
                });
              })
            ),
          ]);
        } else {
          return h(
            'Select',
            {
              props: {
                transfer: true,
                value: params.row.handleActionId,
              },
              on: {
                'on-change': (event) => {
                  this.tableList[params.index].handleActionId = event;
                },
              },
            },
            this.behaviorList.map((item) => {
              return h('Option', {
                props: {
                  value: item.id,
                  label: item.name,
                },
              });
            })
          );
        }
      },
    },

    {
      title: '是否允许重复',
      key: 'isAgain',
      render: (h, params) => {
        return h(
          'i-switch',
          {
            props: {
              value: params.row.canRepeat,
            },
            on: {
              'on-change': (event) => {
                this.tableList[params.index].canRepeat = event;
              },
            },
          },
          [
            h('span', { props: { slot: 'open' } }, '是'),
            h('span', { props: { slot: 'close' } }, '否'),
          ]
        );
      },
    },

  


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM