vue iview表格单元格可编辑input

最新推荐文章于 2024-09-05 22:25:19 发布

强哥叨逼叨

最新推荐文章于 2024-09-05 22:25:19 发布

阅读量2.8k

点赞数

分类专栏： vue 文章标签： iview

本文链接：https://blog.csdn.net/seanxwq/article/details/88309034

版权

vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

方法：

/**
 * 表格内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})  
                    }
                },