（Vue）表格tooltip按条件显示（v-if）

问题描述：

1.表格中有些内容过长超出范围需要用tooltip显示
2.长内容在内容后显示省略号
2.内容短的不需要用tooltip

例如：

解决方法：

使用的是elementUI中的el-tooltip组件，由于项目模板中用的table没使用组件，因此不能直接用官网的例子

1.下载elementUI

npm i element-ui -S

2.在main.js中使用

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

3.表格中使用tooltip

<el-tooltip :disabled="item.surl === null ? true : item.surl.length <= 20 " placement="top" effect="dark">
  <div slot="content" style="width: auto;height:30px;overflow-x: auto;">{{ item.surl }}</div>
  <td style="width: 15%" v-if="item.surl === null">{{item.surl}}</td>
  <td style="width: 15%" v-else-if="item.surl.length > 20">{{item.surl.substr(0,20) + '...'}}</td>
  <td style="width: 15%" v-else-if="item.surl.length <= 20">{{item.surl}}</td>
</el-tooltip>

:disabled——禁用tooltip 设定条件使其不显示，我设置的是当该值为空或者长度小于20时，用的三元运算符，等价于

if(item.surl === null){
  return true;
}else return item.surl.length <= 20;

< div slot=“content” >< /div >——tooltip要显示的内容
tooltip按（；）分行

<div slot="content" v-for="val in ((item.sinput).split(';'))" style="width: auto;height:30px;overflow-x: auto;">{{ val }}</div>

< td >< /td >——显示在表格中的内容
如果值为空 item.surl === null ，显示全部内容 {{item.surl}}
如果长度大于20 item.surl.length > 20， 显示前20个字符和省略号 {{item.surl.substr(0,20) + ‘…’}}
如果值小于等于20 item.surl.length <= 20， 显示全部内容 {{item.surl}}

4.获取数据

getAjaxData() {
  this.tableData = [];
  var that = this;
  $.ajax({
    type: "get", //get post
    async: true,
    url:"************************",
    data: "",
    dataType: "json",
    crossDomain: true,
    success: function(res){
      $.each(res, function (i, val) {
        that.tableData .push(res[i]);
      });
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      console.log("请求对象XMLHttpRequest: " + XMLHttpRequest.status);
      console.log("XMLHttpRequest.readyState: " + XMLHttpRequest.readyState);
      console.log("错误类型textStatus: " + textStatus);
      console.log("异常对象errorThrown: " + errorThrown);
    }
  });
},

数据结构：

全部代码：

<table class="order-table"  BORDER=0; cellspacing=0;>
	<thead class="order-list-title" id="tableHead">
		<tr>
			<th width="19%" id="name">服务名称</th>
			<th width="15%" id="url">接口地址</th>
			<th width="10%" id="description">功能描述</th>
			<th width="12%" id="input">输入描述</th>
			<th width="12%" id="output">输出描述</th>
          	<th width="15%" id="instance">调用示例</th>
          	<th width="5%" id="request">请求方式</th>
          	<th width="5%" id="enable">状态</th>
          	<th id="">操作</th>
		</tr>
	</thead>
	<tbody class="order-list-content" id="tableData" >
		<tr v-for="(item,index) in tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
			:key="index">
			<td style="width: 19%">{{item.sname}}</td>
          <el-tooltip :disabled="item.surl === null ? true : item.surl.length <= 20 " placement="top" effect="dark">
            <div slot="content" style="width: auto;height:30px;overflow-x: auto;">{{ item.surl }}</div>
            <td style="width: 15%" v-if="item.surl === null">{{item.surl}}</td>
            <td style="width: 15%" v-else-if="item.surl.length > 20">{{item.surl.substr(0,20) + '...'}}</td>
            <td style="width: 15%" v-else-if="item.surl.length <= 20">{{item.surl}}</td>
          </el-tooltip>
          <el-tooltip :disabled="item.sdescription === null ? true : item.sdescription.length <= 7" placement="top" effect="dark">
            <div slot="content" style="width: auto;height:30px;overflow-x: auto;">{{ item.sdescription }}</div>
            <td style="width: 10%" v-if="item.sdescription === null">{{item.sdescription}}</td>
            <td style="width: 10%" v-else-if="item.sdescription.length > 7">{{item.sdescription.substr(0,7) + '...'}}</td>
            <td style="width: 10%" v-else-if="item.sdescription.length <= 7">{{item.sdescription}}</td>
          </el-tooltip>
          <el-tooltip :disabled="item.sinput === null ? true : item.sinput.length <= 10" placement="top" effect="dark">
            <div slot="content" v-for="val in ((item.sinput).split(';'))" style="width: auto;height:30px;overflow-x: auto;">{{ val }}</div>
            <td style="width: 12%" v-if="item.sinput === null">{{item.sinput}}</td>
            <td style="width: 12%" v-else-if="item.sinput.length > 10">{{item.sinput.substr(0,10) + '...'}}</td>
            <td style="width: 12%" v-else-if="item.sinput.length <= 10">{{item.sinput}}</td>
          </el-tooltip>
          <el-tooltip :disabled="item.soutput === null ? true : item.soutput.length <= 10" placement="top" effect="dark">
            <div slot="content" v-for="val in ((item.soutput).split(';'))" style="width: auto;height:30px;overflow-x: auto;">{{ val }}</div>
            <td style="width: 12%" v-if="item.soutput === null">{{item.soutput}}</td>
            <td style="width: 12%" v-else-if="item.soutput.length > 10">{{item.soutput.substr(0,10) + '...'}}</td>
            <td style="width: 12%" v-else-if="item.soutput.length <= 10">{{item.soutput}}</td>
          </el-tooltip>
          <el-tooltip :disabled="item.sinstance === null ? true : item.sinstance.length <= 20" placement="top" effect="dark">
            <div slot="content" style="width: auto;height:300px;overflow-x: auto;"><pre><code>{{ item.sinstance }}</code></pre></div>
            <td style="width: 15%" v-if="item.sinstance === null">{{item.sinstance}}</td>
            <td style="width: 15%" v-else-if="item.sinstance.length > 20">{{item.sinstance.substr(0,20) + '...'}}</td>
            <td style="width: 15%" v-else-if="item.sinstance.length <= 20">{{item.sinstance}}</td>
          </el-tooltip>
          <td style="width: 5%">{{item.srequest}}</td>
          <td style="width: 5%">
            <el-image
              style="width: 16px;height: 16px"
              class="table-td-thumb"
              :src="require('./image/'+tableData[index].senable+'.png')"
            ></el-image>
          </td>
			<td>
            <el-button type="text" style="background:rbga(255,255,255,0);" @click="editRow(index, row)">编辑</el-button>
            <el-button type="text" style="background:rbga(255,255,255,0);" @click="deleteRowService(index, true)">删除</el-button>
          </td>
		</tr>
	</tbody>
</table>