[Component] [table, table-column] 在使用CDN的Element Plus时，表格中的每一列都会独占一行，导致显示效果错乱 #12702
Comments
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="title" content="">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<!-- Import style -->
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
<!-- Import Vue 3 -->
<script src="//unpkg.com/vue@3"></script>
<!-- Import component library -->
<script src="//unpkg.com/element-plus"></script>
</head>
<body>
<div id="app" class="fclass">
<el-table :data="tableData" :border="true" style="width: 100%">
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" />
</el-table>
</div>
<script src="" async defer></script>
<script>
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello Vue!',
User: { date: "Fiat", name: 500, address: "white" },
tableRowClassName({ row, rowIndex, }) {
if (rowIndex === 1) {
return 'warning-row'
} else if (rowIndex === 3) {
return 'success-row'
}
return ''
},
tableData: [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
]
}
}
}).use(ElementPlus).mount('#app')
</script>
<style>
.el-table .warning-row {
--el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
--el-table-tr-bg-color: var(--el-color-success-light-9);
}
.el-table th.gutter {
display: table-cell !important;
}
</style>
</body>
</html> |
|
不要使用自闭标签，参见 FAQ |
改为正常的标签写法之后，表格显示错乱问题得到解决。 |
|
@yu0A Before asking questions, you can search to see if there are already related questions, which can help you solve problems quickly. |
|
This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. 此 issue 已被自动锁定，因为关闭后没有任何近期活动。如果有相关 bug，请重新创建一个新 issue。 |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Bug Type:
ComponentEnvironment
3.2.472.3.4Chrome 113.0.5672.63CDNReproduction
Related Component
el-tableel-table-columnReproduction Link
Link
Steps to reproduce
直接打开以下html即可复现问题：
What is Expected?
表格中的每行可以显示多个列
What is actually happening?
表格中的每行只能显示一个列
Additional comments
(empty)
The text was updated successfully, but these errors were encountered: