iview表格中图片显示，表单中图片上传，Tooltip

table中

img标签总是被识别成图片，所以放张图片。
img标签中绑定id，在图片id基础上再加一个logo，以避免id为纯数字。

<Table
 stripe
 border
 :columns="loginLog_columns"
 :data="tableData">
   <template slot-scope="{ row }" slot="name"
             <span style="padding-right:5px;">{{row.name}}</span>
             <img :id="'logo'+row.imageId" src="" alt="" style="width:40px;vertical-align:middle;"
   </template>
   <template slot-scope="{ row }" slot="operate">
       <Button type="success" icon="md-create" size="small" @click="edit(row)">edit</Button>
       <Button type="error" icon="md-trash" size="small" @click="remove(row)">delete</Button>
   </template>
</Table>

js中

getLogo()获取图片并给img标签中src属性赋值。该函数在render函数中调用，即表格初始化时

//获取图片
getLogo(id) {
  this.$loading('Loading...');
  if(id != undefined && id != null){
    $.get("/api/image/search/"+id,(data,status) => {
              this.$loading.close();
    $('#logo'+id).attr('src',data)
  });
  }
},

data中

调用获取图片的接口,此处是render函数，顺便讲一下Tooltip,当表格中内容较多换行时，影响美观，所以可以设置tooltip,当鼠标悬浮时展示全部内容。

{
  title: "Domain",
  key: "domain",
  width: 200,
  align: "center",
  render: (h,obj) => {
              this.getLogo(obj.row.imageId);
                return h('div', [
            　　　　h('Tooltip', {
            　　　　 props: { placement: 'top' ,transfer : true}
            　　　　}, [
            　　　　h('span', {
            　　　　　　style: {
            　　　　　　　　display: 'inline-block',
            　　　　　　　　width: obj.column._width*0.9+'px',
            　　　　　　　　overflow: 'hidden',
            　　　　　　　　textOverflow: 'ellipsis',
            　　　　　　　　whiteSpace: 'nowrap',
            　　　　　　},
            　　　　　}, obj.row.domain),
            　　　　　　h('span', {
            　　　　　　　　slot: 'content',
            　　　　　　　　style: { whiteSpace: 'normal', wordBreak: 'break-all' }
            　　　　　　},obj.row.domain)
            　　　　])
        　　    ])
            
            }
},

Form中

修改时：

新增时：

<!-- 编辑 -->
 <Modal  v-model="appModel.show" :title="appModel.title"  :mask-closable="false">
      <Form :model="appForm"  :rules="ruleValidate"  ref="appForm" :label-width="80">
        <FormItem label="Logo:" prop="logo">
          <Upload style="width: 50px"
              :before-upload="handleUpload"
              accept="image/jpg, image/jpeg, image/png"
              :on-format-error="handleFormatError"
              :max-size="512"
              type="drag">
              <div style="position: relative;padding:5px 0;">
                  <Icon type="ios-camera" size="30" style="color: #3BBE9B"></Icon>
                  <!-- Img标签应该有个结束-->
                  <Img :src="appForm.logo" style="height:100%;position:absolute;top:0;left:0;right:0; bottom:0; margin:auto;" v-if="appForm.logo"/
              </div>
          </Upload>
        </FormItem>
        <FormItem label="Name:" prop="name">
          <Input v-model="appForm.name" style="width:360px" />
        </FormItem>
        <FormItem label="Domain:" prop="domain">
          <Input v-model="appForm.domain" style="width:360px" />
        </FormItem>
        <FormItem label="Type:" prop="type">
          <Input v-model="appForm.type" style="width:360px" />
        </FormItem>
        <FormItem label="IP:" prop="ip">
          <Input v-model="appForm.ip" style="width:360px" />
        </FormItem>
      </Form>
      <div slot="footer" style="text-align:center;">
        <Button type="success" @click="okSave" class="btn">Save</Button>
      </div>
	</Modal>

handle开头的两个方法是Upload标签的事件

handleFormatError (file) {
	  this.$Notice.warning({
	      title: 'The file format is incorrect',
		  desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
	  });
},
handleUpload(file){
	var reader = new FileReader();
	reader.readAsDataURL(file);
	reader.onload = (e) => {
	    this.appForm.logo = e.target.result;
	}
},
//获取行数据
async edit(rowData){
  this.$refs.appForm.resetFields();
  this.appModel.show = true;
  this.appModel.title = 'Edit';
  this.appForm.name = rowData.name;
  this.appForm.domain = rowData.domain;
  this.appForm.type = rowData.type;
  this.appForm.ip = rowData.ip;
  this.appForm.logo =  $('#logo'+rowData.imageId).attr('src');
},