欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue iview表格单元格可编辑input

程序员文章站 2024-03-12 19:36:14
...

方法:

/**
 * 表格内Input组件
 * @param {function} h // render 内部h函数
 * @param {object} params  表格参数
 * @param {string/array} prop // params.row[...prop]
 * @param {function} obj, 可选参数
 */

// TODO:修改为组件
export const inTableInputItem = (
  h,
  params,
  prop,
  {
    changeCall,
    blurCall,
    type,
    numberObj,
    disabled,
    styles,
    badSty,
    className,
    prepend
  }
) => {
  let value = params.row
  let val = value[prop]
  if (typeof prop === "object") {
    try {
      prop.forEach(key => {
        value = value[key]
      })
    } catch (error) {}

    val = value || 0
  }

  if (disabled) {
    return <span>{val}</span>
  } else {
    let _val = val
    if(prepend){
      _val =  Math.abs(val)
    }
    if(!blurCall){
      blurCall = ()=>{};
    }
    return (
      <Input
        value={ _val || ""}
        class={className}
        v-inputnumber
        style="top:0"
        onOn-change={changeCall.bind(this, params, prop)}
        onOn-blur={blurCall.bind(this, params)}
      >
      {prepend?<Button slot="prepend"  on-click={prepend.call.bind(this, params, prop, val)} icon={val>=0?"md-add":"md-remove"}></Button>:''}
      </Input>
      
    )
  }

  // if (type === "number") {
  //   if (!numberObj) numberObj = { max: 100000, min: 0, step: 1 }
  //   return (
  //     //const {max,max,} = nember

  //     <InputNumber
  //       max={numberObj.max}
  //       min={numberObj.max}
  //       step={numberObj.step}
  //       value={val || 0}
  //       onOn-change={changeCall.bind(this, params, prop)}
  //       onOn-blur={blurCall.bind(this, params)}
  //     />
  //   )
  // } else {
   
  // }

  // return (
  //   <Input
  //     value={val || ""}
  //     onOn-change={changeCall.bind(this, params, prop)}
  //     onOn-blur={blurCall.bind(this, params)}
  //   />
  // )
}
/**
 * 过滤数值
 */
export const filterNum = val => {
  if (isNaN(parseFloat(val))) {
    return 0
  } else {
    return parseFloat(val)
  }
}

调用方式:

  {
                    title: '标题',
                    key: 'tt',
                    width: 120,
                    render: (h, params) => {
                        return inTableInputItem(h,params,'tt',{changeCall:this.ttChange, blurCall: this.blurChange})  
                    }
                },

 

相关标签: iview