iview—Table表格render 渲染

1.序號
2.if判斷、a標簽
3.if判斷、Input輸入
4.renderHeader自定義列頭的點擊事件、render的Input點擊事件(nativeOn click)
5.正常列
6.按鈕Button
7.復選框Checkbox
8.下拉框Select(遍歷list生成選擇項)
9.下拉框Select(枚舉生成選擇項)

 

const that = this
this.columns = [
  {  //1.序號
    type: 'index',
    title : '序號',
    width: 50,
    align: 'center'
  },
  {  //2.if判斷、a標簽
    title: '操作',
    key: 'action',
    align: 'center',
    fixed: 'left',
    width: 80,
    render: (h, params) => {
      if (this.dataList[params.index].isRptEdit=='1') {
        // 主項和在報告錄入環節的不可取消選擇
        return h('span', '/');
      } else {
        return h('div', [
          h('a', {
            style: {
              color: 'blue'
            },
            on: {
              click: () => {
                this.unsel(params);
              }
            }
          }, '取消選擇')
        ])
      }
    }
  },
  {  //3.if判斷、Input輸入
    title: '項目名稱',
    key: 'itemname',
    width : '200',
    render: (h, params) => {
      if (this.dataList[params.index].isRptEdit=='1') {
        // 在報告錄入環節的不可編輯
        return h('span', {
          style: {
            color: '#c5c8ce'
          }
        }, params.row.itemname);
      } else {
        return h('Input', {
          props: {
            type: 'text',
            size : 'small',
            value: this.dataList[params.index].itemname
          },
          on: {
            'on-blur': (event) => {
              that.dataList[params.index].itemname = event.target.value;
            }
          }
        }, '')
      }
    }
  },
  {  //4.renderHeader自定義列頭的點擊事件、render的Input點擊事件(nativeOn click)
    title: '報告錄入人員',
    key: 'rpteditor',
    width : '150',
    renderHeader : (h, params)=> {
      return h('div',[
        h('a',{
          style : {
            color: 'blue'
          },
          on : {
            click: () => { //自定義列頭的點擊事件
              this.editMode = 'batch';
              this.personKey = 'rpteditor'
              this.showSelPerson = true;
            }
          }
        },params.column.title)
      ])
    },
    render: (h, params) => {
        const row = params.row;
        return h('Input', {
          props: {
            type: 'text',
            size : 'small',
            readonly: true,
            value: this.dataList[params.index].rpteditor
          },
          nativeOn: {
            click: () => {
              this.editMode = 'one';
              this.currentRowId = params.index;
              this.personKey = 'rpteditor'
              this.showSelPerson = true;
            }
          }
        }, '');
    }
  },
  {  //5.正常列
    title: '當前處理人',
    key: 'currentHandler',
    width : '120'
  },
  {  // 6.按鈕Button
    title: '操作',
    key: 'action',
    align: 'center',
    width: 155,
    render: (h, params) => {
      return h('div', [
        h('Button', {
          props: {
            size: 'small'
          },
          style: {
            marginRight: '5px',
            fontSize: '12px',
            borderColor: '#5cadff'
          },
          on: {
            click: () => {
              this.upRow(params)
            }
          }
        }, '上移'),
        h('Button', {
          props: {
            size: 'small'
          },
          style: {
            marginRight: '5px',
            fontSize: '12px',
            borderColor: '#5cadff'
          },
          on: {
            click: () => {
              this.downRow(params)
            }
          }
        }, '下移'),
        h('Button', {
          props: {
            size: 'small'
          },
          style: {
            marginRight: '5px',
            fontSize: '12px',
            borderColor: '#5cadff'
          },
          on: {
            click: () => {
              this.delRow(params)
            }
          }
        }, '刪除')
      ])
    }
  },
  {  // 7.復選框Checkbox
    title: '主項',
    key: 'must',
    width : '50',
    align: 'center',
    render: (h, params) => {
      return h('Checkbox', {
        props: {
          size : 'small',
          value: this.dataList[params.index].must
        },
        on: {
          'on-change': (e) => {
            this.dataList[params.index].must = e
          }
        }
      }, '')
    }
  },
  { // 8.下拉框Select(遍歷list生成選擇項)
    title: '文書項目名稱',
    key: 'itemname',
    width : '200',
    render: (h, params) => {
      return h('Select', {
        props: {
          value: this.dataList[params.index].itemname, // 獲取選擇的下拉框的值
          size: 'small'
        },
        on: {
          'on-change': e => {
            this.dataList[params.index].itemname = e // 改變下拉框賦值
          }
        }
      }, this.productTypeList.map((item) => { // this.productTypeList下拉框里的data
        return h('Option', { // 下拉框的值
          props: {
            value: item.id,
            label: item.name
          }
        })
      }))
    }
  },
  { // 9.下拉框Select(枚舉生成選擇項)
    title: '文書項目名稱',
    key: 'itemname',
    width : '200',
    render: (h, params) => {
      return h('Select', {
        props: {
          value: this.dataList[params.index].itemname, // 獲取選擇的下拉框的值
          size: 'small'
        },
        on: {
          'on-change': e => {
            this.dataList[params.index].itemname = e // 改變下拉框賦值
          }
        }
      },
      [
        h('Option',{
          props: {
               value: '1'
          }
        },'option1'),
        h('Option',{
            props: {
                value: '2'
             }
        },'option2')
      ])
    }
  }
]