在iview表格插入title提示

在iview表格插入title提示

实现效果：当表格数据内容较多的时候，文本不换行，超出部分显示为省略号的时候，鼠标移动到某个表格内容的时候，展示出全部内容，像title属性一样。

实现方法：

方法一：

直接用iview组件的属性：tooltip。以tooltip组件显示完整内容

方法二：

利用render函数实现。自定义渲染当前列，给其加上title属性

代码如下：

<template>
  <div class="box">
    <Table :columns="columns" :data="tableData" height="350px"></Table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: "物品",
          key: "title",
          ellipsis: true,
          // 方法一
          // tooltip: true,
          // 方法二
          render: (h, params) => {
            return h("div", [
              h(
                "span",
                {
                  attrs: {
                    title: params.row.title,
                  },
                },
                params.row.title
              ),
            ]);
          },
        },
        {
          title: "价格",
          key: "value",
        },
      ],
      tableData: [
        {
          title: "薯片",
          value: 5,
        },
        {
          title:
            "零食大礼包：包含辣条（亲嘴烧、卫龙）、纯牛奶、喜之郎、QQ星、薯片、酸奶、饼干",
          value: 45,
        },
        {
          title: "可口可乐",
          value: 6,
        },
        {
          title: "苹果手机",
          value: 5000,
        },
        {
          title: "香水",
          value: 300,
        },
      ],
    };
  },
};
</script>

<style>
.box {
  width: 300px;
}
</style>

效果：

方法一：

方法二：