<el-table-column align="center" label="快递" > <el-table-column :cell-style="{ backgroundColor: '#f52f1e' }" align="right" prop="exAmount" label="销售金额" > <template slot-scope="scope">{{num_filters(scope.row.exAmount)}}</template> </el-table-column> <el-table-column align="right" prop="exSalesProfit" label="销售毛利"> <template slot-scope="scope">{{num_filters(scope.row.exSalesProfit)}}</template> </el-table-column> </el-table-column> 以上代码中:cell-style无效
时间: 2024-03-06 11:51:00 浏览: 24
根据你提供的代码,我可以看出其中存在一个嵌套的问题。在 `<el-table-column>` 标签下,你又使用了一个 `<el-table-column>` 标签。这个标签不应该被嵌套在父级标签内部,而应该在同一层级下。因此,`cell-style` 的样式无效可能是由于这个嵌套问题导致的。你可以将第二个 `<el-table-column>` 标签移动到与另一个同级别的位置,就可以解决这个问题了。例如:
```
<el-table-column align="center" label="快递">
<el-table-column align="right" prop="exAmount" label="销售金额">
<template slot-scope="scope">{{num_filters(scope.row.exAmount)}}</template>
</el-table-column>
<el-table-column align="right" prop="exSalesProfit" label="销售毛利">
<template slot-scope="scope">{{num_filters(scope.row.exSalesProfit)}}</template>
</el-table-column>
</el-table-column>
```
相关问题
<template> <el-container style="height: 100%"> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="index" label="考核指标" :header-cell-style="{backgroundColor: '#ff0000'}" width="110"></el-table-column> <el-table-column prop="ymatter" label="具体事项(原)" :header-cell-style="{backgroundColor: '#00ff00'}"></el-table-column> <el-table-column label="具体事项(新)" prop="xmatter"> <el-table-column prop="point" label="考核要点"></el-table-column> <el-table-column prop="method" label="计分方法"></el-table-column> <el-table-column prop="target" label="考核目标" width="200"></el-table-column> </el-table-column> <el-table-column prop="cycle" label="考核周期" :header-cell-style="{backgroundColor: '#0000ff'}" width="50"></el-table-column> </el-table> </el-container> </template>给这个表格美化的显眼点
你可以尝试在表头中添加图标或者字体图标,让它更加显眼。例如,可以在考核指标列的表头单元格中添加一个 `el-icon-warning-outline` 的图标,表示这一列是比较重要的内容;在考核周期列的表头单元格中添加一个 `el-icon-date` 的图标,表示这一列是和日期相关的内容。同时,你也可以尝试添加一些过渡效果,比如当鼠标悬停在单元格上时,让单元格的背景色变化,增加一些交互效果。下面是一个例子:
```
<template>
<el-container style="height: 100%">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="index" label="考核指标" :header-cell-style="{backgroundColor: '#ff0000'}" width="110">
<template slot="header">
<i class="el-icon-warning-outline"></i>
考核指标
</template>
</el-table-column>
<el-table-column prop="ymatter" label="具体事项(原)" :header-cell-style="{backgroundColor: '#00ff00'}"></el-table-column>
<el-table-column label="具体事项(新)" prop="xmatter">
<el-table-column prop="point" label="考核要点"></el-table-column>
<el-table-column prop="method" label="计分方法"></el-table-column>
<el-table-column prop="target" label="考核目标" width="200"></el-table-column>
</el-table-column>
<el-table-column prop="cycle" label="考核周期" :header-cell-style="{backgroundColor: '#0000ff'}" width="50">
<template slot="header">
<i class="el-icon-date"></i>
考核周期
</template>
</el-table-column>
</el-table>
</el-container>
</template>
<style>
.el-table__row:hover {
background-color: #f5f5f5;
}
</style>
```
这个例子中,我们在考核指标列和考核周期列的表头中分别添加了一个图标和文字,让它们更加显眼。同时,在 CSS 中定义了当鼠标悬停在单元格上时,单元格的背景色变成浅灰色,增加了一些过渡效果。你可以根据需要修改图标和颜色等样式,或添加其他交互效果。
<template> <el-container style="height: 100%"> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="index" label="考核指标" :header-cell-style="{backgroundColor: '#ff0000'}" width="110"></el-table-column> <el-table-column prop="ymatter" label="负责人" :header-cell-style="{backgroundColor: '#00ff00'}" width="100"></el-table-column> <el-table-column prop="cycle" label="事项" :header-cell-style="{backgroundColor: '#0000ff'}" ></el-table-column> </el-table> </el-container> </template>表格里的内容如何实现手动换行
在以上的 Vue 表格中实现手动换行,可以使用 `<br>` 标签来手动添加换行符。具体步骤如下:
1. 在要换行的位置插入 `<br>` 标签。
2. 在对应的单元格中使用 `v-html` 指令,将内容渲染为 HTML。
下面是一个示例代码:
```html
<template>
<el-container style="height: 100%">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="index" label="考核指标" :header-cell-style="{backgroundColor: '#ff0000'}" width="110"></el-table-column>
<el-table-column prop="ymatter" label="负责人" :header-cell-style="{backgroundColor: '#00ff00'}" width="100"></el-table-column>
<el-table-column prop="cycle" label="事项" :header-cell-style="{backgroundColor: '#0000ff'}">
<template slot-scope="scope">
<div v-html="scope.row.cycle"></div>
</template>
</el-table-column>
</el-table>
</el-container>
</template>
<script>
export default {
data() {
return {
tableData: [
{
index: '考核指标1',
ymatter: '负责人1',
cycle: '这是第一行<br>这是第二行<br>这是第三行',
},
{
index: '考核指标2',
ymatter: '负责人2',
cycle: '这是第一行<br>这是第二行<br>这是第三行',
},
],
}
},
}
</script>
```
上面的示例中,使用 `v-html` 指令将 `scope.row.cycle` 中的文本内容渲染为 HTML,其中 `<br>` 标签用于手动添加换行符。