自定义 CSS 和 t-att-class 的使用

一、创建css文件

<model_name>\static\src\scss\custom.css

.color_loss_red {
    color: red !important;
}

二、声明css文件

__manifest__.py

'assets': {
        'web.assets_backend': [
        	...
            '<model_name>/static/src/scss/custom.css',
        ]
    },

三、引用自定义的css文件

views.xml

<?xml version='1.0' encoding='utf-8'?>
<odoo>
	<!-- 引用自定义的css文件 -->
	<template id="assets_backend" name="<model_name> assets" >
	    <xpath expr="." position="inside">
	        <link rel="stylesheet" type="text/css" href="/<model_name>/static/src/scss/custom.css"/>
	    </xpath>
	</template>

	<!-- tree view -->
    <record id="<实际模型名称>_view_tree" model="ir.ui.view">
        <field name="name"><实际模型名称>.view.tree</field>
        <field name="model"><实际模型名称></field>
        <field name="arch" type="xml">
            <tree>
                <field name="age" t-att-class="age > 18? 'color_loss_red' : ''"/>
            </tree>
        </field>
    </record>
</odoo>

三、介绍t-att-class

t-att-class 是 Odoo 的 QWeb 模板引擎中的一个动态属性，用于在 XML 视图中根据条件动态添加 CSS 类。这种机制允许你在视图渲染时根据模型字段的值或其他逻辑条件，动态应用不同的样式。

基本语法：

<element t-att-class="condition ? 'class-if-true' : 'class-if-false'">
    <!-- content -->
</element>

• condition: 条件表达式。如果条件为 True，会使用 'class-if-true'；否则使用 'class-if-false'。如果不需要 class-if-false，可以留空。
• 'class-if-true' 和 'class-if-false': 要应用的 CSS 类名。

使用场景：

• 根据字段值动态应用样式。
• 控制显示逻辑和样式的条件变化。
• 基于状态、数量等的动态样式变化。

示例用法

1. 基于条件动态添加样式

假设你有一个 qty_loss 字段，并且你希望在值大于 500 时显示红色背景，在其他情况下保持默认样式：

<field name="qty_loss" t-att-class="qty_loss > 500 ? 'red-bg' : ''"/>

在这个例子中：

• 当 qty_loss 的值大于 500 时，red-bg 类会被应用。
• 当 qty_loss 的值小于等于 500 时，不会应用任何类（即保持默认样式）。

2. 应用多个类

你还可以同时添加多个类，例如根据条件决定是否应用多个类：

<field name="qty_loss" t-att-class="qty_loss > 500 ? 'red-bg bold-text' : ''"/>

这个例子中：

• 如果 qty_loss 大于 500，则会同时添加 red-bg 和 bold-text 两个类。
• 否则不添加任何类。

3. 更复杂的条件表达式

你可以使用更复杂的条件逻辑，例如根据多个字段值来动态应用样式：

<field name="status" t-att-class="status == 'done' ? 'green-text' : (status == 'cancelled' ? 'red-text' : '')"/>

在这个例子中：

• 如果 status 为 'done'，则应用 green-text 类。
• 如果 status 为 'cancelled'，则应用 red-text 类。
• 否则，不应用任何类。

4. 应用 CSS 类和保留已有类

你可以使用 t-attf-class 来动态添加类并且保留已经定义的类，类似于字符串格式化功能：

<field name="qty_loss" t-attf-class="qty_loss > 500 and 'red-bg' or ''"/>

5. 结合 t-if 使用

如果你需要更加精确地控制什么时候显示某个字段或元素，可以将 t-att-class 与 t-if 结合使用。

<field name="qty_loss" t-if="qty_loss > 0" t-att-class="qty_loss > 500 ? 'red-bg' : ''"/>

在这个例子中，只有在 qty_loss > 0 时才会渲染该字段，并且动态应用背景颜色。

注意事项：

• 确保 CSS 类存在：你需要在自定义 CSS 文件中预先定义这些动态类，否则它们将不起作用。
• 简洁条件：条件表达式可以非常灵活，但应保持简洁，避免嵌套过深的逻辑。
• 在不同视图中使用：t-att-class 可用于 tree、form 等不同视图，适合根据不同数据在不同视图中动态设置样式。

小结：

t-att-class 是 Odoo QWeb 模板中非常实用的动态属性，允许你根据模型数据的值动态应用 CSS 类，从而改变元素的外观。通过这种方式，视图可以实现更加灵活和动态的呈现。