Vue ElementUI el-table 单元格不换行,使用省略号
Vue ElementUI el-table 单元格不换行,使用省略号
·
API
el-table 设置属性 cell-class-name,自定义 className
代码
<template>
<el-table
:data="tableData"
style="width: 100%"
cell-class-name="table_cell">
<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 prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
}
}
</script>
<style >
.table_cell .cell{
white-space: nowrap;
}
</style>
知识点
1.代码第 5 行,设置属性 cell-class-name;
2.代码第 37 行,注意这里不是 scoped,是全局class。可自行设置前缀;
3.代码第 38 - 40 行,注意这里是两级,第二级 .cell 单元格;
效果
修改前
修改后
更多推荐
已为社区贡献10条内容
所有评论(0)