很多时候会使用到 elementui 的表格组件,有些需求的表格内容特别长,这时候需要使用插槽和el-tooltip来展示内容,需要给表格列固定宽
JavaScript
export default {
data() {
return {
tableData: [
{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', val: '在当下这个数字化时代下,ChatGPT 的横空出世,不仅颠覆了人们对于 AI 的传统认知,也带来了 AIGC 类新技术的井喷式发展,使得 AI 在全球范围内掀起了新一轮科技革命。从无人驾驶汽车到智能助手,从医疗诊断到自然语言处理,各个领域都在纷纷借助 AI 技术来实现革命性突破,这也为全球 AI 领域的热度与创新潜力带来了蓬勃发展,吸引着创意无限的开发者们。' },
{ date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄', val: '这是一段普通的文字描述。' },
{ date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄', val: '这是一段普通的文字描述。' },
{ date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄', val: '这是一段普通的文字描述。' },
{ date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄', val: '这是一段普通的文字描述。' }
]
}
},
methods: {
// 查看
handleClickGet(val) {
console.log(val);
},
// 编辑
handleClickEdit(val) {
console.log(val);
},
// 删除
handleClickDel(val) {
console.log(val);
},
},
mounted() {
},
created() { }
}
css
// element-ui 表格内容居中
.el-table__cell {
text-align: center !important;
}
// tooltip文字提示的三角形样式颜色修改
// .el-tooltip__popper[x-placement^="方向/top"] .popper__arrow:after
// border-方向-color: #747574 !important;
.el-tooltip__popper[x-placement^="bottom"] .popper__arrow {
border-bottom-color: white !important;
}
.el-tooltip__popper[x-placement^="bottom"] .popper__arrow:after {
border-bottom-color: white !important;
}
.testtooltip {
width: 50%;
}
精彩文章
发表评论