el-table 鼠标放到上面展示内容

最新推荐文章于 2024-04-24 16:51:14 发布

是阿狸

最新推荐文章于 2024-04-24 16:51:14 发布

阅读量204

点赞数 2

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_64707449/article/details/137075008

版权

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      label="详细信息"
      width="300">
      <template slot-scope="scope">
        <el-tooltip class="item" effect="dark" placement="top" :content="scope.row.info" :disabled="!scope.row.info">
          <div>{{ scope.row.info ? scope.row.info.substring(0, 10) + '...' : '' }}</div>
        </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        info: '这是一段很长的详细信息，比如可以包含很多的细节，但是在表格中我们只显示一小部分。'
      }, {
        date: '2016-05-04',
        name: '李小虎',
        info: '另一段详细信息，这里也是同样的原理。'
      }, {
        date: '2016-05-01',
        name: '赵小虎',
        info: ''
      }]
    }
  }
}
</script>