对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://fly63.com/article/detial/6243