Odoo 13树视图列宽调整方法咨询：CSS与Assets配置无效求可行方案

阿华AIGC实验室

2026-4-29

Odoo 13 树视图列宽调整失效的解决办法

我明白你在调整Odoo 13树视图列宽时遇到的麻烦——尝试了加CSS资产、给树视图加自定义类却没效果，这确实挺让人头疼的。下面给你几个经过验证的可行方案，一步步来解决：

方案一：修正CSS选择器（最直接的方法）

你之前的CSS选择器没命中正确的DOM元素，Odoo 13的树视图列是放在.o_list_table里的th和td标签上，而且会给这些标签加data-name属性对应字段名。调整你的CSS代码如下：

/* 针对自定义类aks_width_class下的work_description字段列 */
.o_list_view .aks_width_class .o_list_table th[data-name="work_description"],
.o_list_view .aks_width_class .o_list_table td[data-name="work_description"] {
    width: 175px !important;
}

为什么之前的代码失效？

你原来的选择器.aks_width_class[data-id="work_description"]逻辑错误：data-id并不是绑定在树视图的根元素上，而是每个列的th/td才会带有对应字段的标识，而且需要通过层级选择器定位到这些子元素。加上!important是为了覆盖Odoo默认的样式优先级。

方案二：用JS继承TreeRenderer强制设置宽度（CSS失效时的备选）

如果CSS还是被Odoo的默认样式覆盖，我们可以通过继承Odoo的Tree视图渲染器来动态设置列宽：

在模块的static/js目录下创建tree_width.js文件，内容如下：

odoo.define('aks_workbook.tree_view_width', function (require) {
    "use strict";

    var ListRenderer = require('web.ListRenderer');

    ListRenderer.include({
        // 渲染表头单元格时设置宽度
        _renderHeaderCell: function (node) {
            var $th = this._super.apply(this, arguments);
            // 仅当树视图有自定义类且字段匹配时设置宽度
            if (node.attrs.name === 'work_description' && this.$el.hasClass('aks_width_class')) {
                $th.css('width', '175px');
            }
            return $th;
        },
        // 渲染表体单元格时设置宽度
        _renderBodyCell: function (record, node) {
            var $td = this._super.apply(this, arguments);
            if (node.attrs.name === 'work_description' && this.$el.hasClass('aks_width_class')) {
                $td.css('width', '175px');
            }
            return $td;
        },
    });
});

修改你的assets.xml，把JS文件添加到后端资产中：

<?xml version="1.0" encoding="utf-8"?>
<odoo>
 <template id="assets_backend_aks_workbook" name="AKS workbook" inherit_id="web.assets_backend">
 <xpath expr="." position="inside">
 <link rel="stylesheet" href="/alkidhma/aks_workbook/static/css/aks_workbook.css"/>
 <!-- 新增JS引用 -->
 <script type="text/javascript" src="/alkidhma/aks_workbook/static/js/tree_width.js"></script>
 </xpath>
 </template>
</odoo>