show-overflow-tooltip 属性和 同时使用文字截断失效

by

show-overflow-tooltip 属性和<el-link></el-link> 同时使用文字截断失效

4.1在elementui 的 table 组件中 我们可以通过 show-overflow-tooltip 属性来让溢出的文字自动截断

 

<el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>

4.2如果表格内容是复杂类型的数据要自己处理的时候可以这样写

 

<el-table :data="tableData">
    <el-table-column type="index" width="50"></el-table-column>
    <el-table-column prop="address" label="地址" show-overflow-tooltip>
        <template slot-scope="scope">
            <span>
                {{scope.row.address}}
            </span>
        </template>
    </el-table-column>
</el-table>

注意，如果想让show-overflow-tooltip生效一定要加<span></span>

4.3 show-overflow-tooltip 和 <el-link></el-link> 同时使用的时候 文字截断失效了。

 

Leave a Comment