zoukankan      html  css  js  c++  java
  • elementui中table列内容过长,省略号+hover显示

    目的:实现element-ui中table中列内容超长时,可以在列表只显示部分内容,鼠标上去hover显示全部内容。

    实现:只用在column中加 :show-overflow-tooltip="true" > //el-table字体长度过长,浮动显示

    效果:

    代码:

    <template>
    <el-table
    :data="tableData"
    border
    style=" 100%">
    <el-table-column
    fixed
    prop="date"
    label="日期"
    width="300">
    </el-table-column>
    <el-table-column
    prop="name"
    label="姓名"
    width="120">
    </el-table-column>
    <el-table-column
    prop="province"
    label="省份"
    width="120">
    </el-table-column>
    <el-table-column
    prop="city"
    label="市区"
    width="120">
    </el-table-column>
    <el-table-column
    prop="address"
    label="地址"
    width="300"
    :show-overflow-tooltip="true" >
    </el-table-column>
    <el-table-column
    prop="zip"
    label="邮编"
    width="120">
    </el-table-column>
    <el-table-column
    fixed="right"
    label="操作"
    width="200">
    <template slot-scope="scope">
    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
    <el-button type="text" size="small">编辑</el-button>
    <el-popover placement="right" width="400" trigger="click">
    <el-table :data="gridData">
    <el-table-column width="150" property="date" label="日期"></el-table-column>
    <el-table-column width="100" property="name" label="姓名"></el-table-column>
    <el-table-column width="300" property="address" label="地址"></el-table-column>
    </el-table>
    <el-button @click="handleClick(scope.row)" type="text" size="small" slot="reference">弹窗</el-button>
    </el-popover>
    </template>

    </el-table-column>
    </el-table>
    </template>

    <script>
    export default {
    methods: {
    handleClick(row) {
    console.log(row);
    }
    },

    data() {
    return {
    tableData: [{
    date: '2016-05-02',
    name: '王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎',
    province: '上海',
    city: '普陀区',
    address: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄',
    zip: 200333
    }, {
    date: '2016-05-04',
    name: '王小虎',
    province: '上海',
    city: '普陀区',
    address: '上海市普陀区金沙江路 1517 弄',
    zip: 200333
    }, {
    date: '2016-05-01',
    name: '王小虎',
    province: '上海',
    city: '普陀区',
    address: '上海市普陀区金沙江路 1519 弄',
    zip: 200333
    }, {
    date: '2016-05-03',
    name: '王小虎',
    province: '上海',
    city: '普陀区',
    address: '上海市普陀区金沙江路 1516 弄',
    zip: 200333
    }]
    }
    }
    }
    </script>

    转自:https://www.cnblogs.com/hellomaster/p/13719164.html

  • 相关阅读:
    goweb-goweb基础
    玩转Git
    程序爱好者的常用网站
    高等数学思维导图——6.微分方程
    前端趣玩——超炫的聚光灯效果
    Python课程笔记(四)
    高等数学思维导图——5.多元函数微分法及其应用
    算法很美(四)
    第五章——定积分必记公式
    十大经典排序算法
  • 原文地址:https://www.cnblogs.com/javalinux/p/14809512.html
Copyright © 2011-2022 走看看