iView使用特殊点总结

更新日期: 2019-10-03阅读: 2.5k标签: iview

对iView使用过程中一些特殊的地方进行总结


Table导出csv嵌套对象

handleStr(str){
  let handleStr=str.replace(/[\r\n]/g,""); 
    //先判断字符里是否含有逗号
  if(str.indexOf(",") != -1){
    //如果还有双引号,先将双引号转义,避免两边加了双引号后转义错误              
    if(str.indexOf("\"") != -1){
      // 这里必须对全局进行替换,网上原版是没有的,不加全部只能处理数组,不能处理json
      handleStr=str.replace(/\"/g, "\"\"");
    }
    //将逗号转义  
    handleStr="\""+handleStr+"\"";  
    return handleStr
  } 
  return "\""+handleStr+"\"";  
}


Table中添加图片

column:[
  {
    title: "头像",
    width: 160,
    render: (h, params) => {
        return h('img', {
          style: {
            width: "100px",
          },
          // 可以使用domProps或者attrs
          domProps: {
            src: params.row.url
          }
          // attrs: {
          //  src: params.row.url  
          // }
        })
    }
  }
]


Table中Input等元素操作修改data值

<Table :columns="column" :data="data"/>

column:[
  {
    title: "标签",
    width: 160,
    render: (h, params) => {
      return h("Input", {
        props: {
          value: params.row.label
        },
        on: {
          "on-blur": event => {
            this.data[params.row.index].label = params.row.label =
              event.target.value;
          }
        }
      });
    }
  }
]


Form表单对数字校验

{type: 'number', message: '请输入数字', trigger: 'blur'}
原文:https://segmentfault.com/a/1190000020871442


链接: https://www.fly63.com/article/detial/6243

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!