<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 22:51:00 浏览: 126
根据你提供的代码,我可以看出其中存在一个嵌套的问题。在 `<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> <div class="addEdit-block"> <el-form class="detail-form-content" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px" :style="{backgroundColor:addEditForm.addEditBoxColor}" > <el-row> <el-col :span="12"> <el-form-item class="input" v-if="type!='info'" label="账号" prop="zhanghao"> <el-input v-model="ruleForm.zhanghao" placeholder="账号" clearable :readonly="ro.zhanghao"></el-input> </el-form-item> <div v-else> <el-form-item class="input" label="账号" prop="zhanghao"> <el-input v-model="ruleForm.zhanghao" placeholder="账号" readonly></el-input> </el-form-item> </div>
这是一个Vue.js的模板代码,用于渲染一个包含表单元素的组件。其中使用了element-ui这个UI组件库来渲染表单元素。代码解析如下:
```html
<template>
<div class="addEdit-block">
<!-- el-form是element-ui中的表单组件 -->
<el-form
class="detail-form-content"
ref="ruleForm"
:model="ruleForm"
:rules="rules"
label-width="80px"
:style="{backgroundColor:addEditForm.addEditBoxColor}"
>
<el-row>
<el-col :span="12">
<!-- el-form-item是element-ui中的表单项组件,用于包裹表单元素 -->
<el-form-item class="input" v-if="type!='info'" label="账号" prop="zhanghao">
<!-- el-input是element-ui中的输入框组件 -->
<el-input
v-model="ruleForm.zhanghao"
placeholder="账号"
clearable
:readonly="ro.zhanghao"
></el-input>
</el-form-item>
<div v-else>
<el-form-item class="input" label="账号" prop="zhanghao">
<el-input
v-model="ruleForm.zhanghao"
placeholder="账号"
readonly
></el-input>
</el-form-item>
</div>
</el-col>
</el-row>
<!-- 其他表单项省略... -->
</el-form>
</div>
</template>
```
这段代码定义了一个名为addEdit-block的组件,包含了一个el-form表单元素,其中包含了一个el-input输入框组件和一个el-form-item表单项组件。组件中的所有数据和事件都由Vue实例管理。
<el-table-column>更改背景颜色
可以通过使用 el-table-column 的 slot-scope 属性,结合自定义的模板来更改表格列的背景颜色。具体步骤如下:
1. 在 el-table-column 中添加 slot-scope 属性,并定义一个名称,例如 scope。
2. 在模板中使用 scope.row 对应列的数据,来设置该列的背景颜色。
以下是一个示例代码:
```
<el-table :data="tableData">
<el-table-column prop="name" label="姓名" width="180">
<template slot-scope="scope">
<div :style="{backgroundColor: scope.row.color}">{{ scope.row.name }}</div>
</template>
</el-table-column>
<el-table-column prop="age" label="年龄" width="180">
<template slot-scope="scope">
<div>{{ scope.row.age }}</div>
</template>
</el-table-column>
</el-table>
```
在上面的示例中,我们通过自定义模板来更改第一列的背景颜色。其中,scope.row 表示当前行的数据,color 是该行数据中自定义的颜色属性。我们通过 :style 绑定一个对象来设置该列的背景颜色。
阅读全文