定义js文件。

// 订单状态
const state_config= {
    0: '未付款',
    1: '待出行',
    2: '已完成',
    3: '已退订',
    4: '已取消'
};
const state_config_color = {
    0: '<ber>待付款</ber>',    // 待付款-红色
    1: '<beg>待出行</beg>',    // 待付款-红色
    2: '<beb>已完成</beb>', // 待出行-橙色
    3: '<zib>已退订</zib>',   // 已完成-绿色
    4: '已退订'   // 已完成-绿色
};

/**
 *  接受订单状态的数字  例如  1  2 5 3
 *  返回 html格式。 例如  <ber>待付款</ber>  已退订
 */
function  get_state_text(value){
    // return state_config[value] ;
    return state_config_color[value] ;
    // return `<span class="${state_config_color[value]}">${state_config[value]}</span>`;
}
// 订单状态

// 生成下拉框HTML
function getStateSelectHTML(defaultValue = '') {
    let options = '<option value="">全部</option>';
    Object.entries(state_config).forEach(([value, text]) => {
        options += `<option value="${value}" ${defaultValue===value?'selected':''}>${text}</option>`;
    });
    return options;
}

定义成这种也不管用。

, {field: 'title', title: '标题', width: 300, style: 'font-size: 12px;', templet: '#format_state'}
用这样的代码。也不管用。还是显示 span标签。

table这样写。

, {field: 'goDate', title: '出行日期', width: 80, style: 'font-size: 12px;'}
, {field: 'jinbi', title: '赠送金币', width: 60, style: 'font-size: 12px;'}
, {field: 'state', title: '支付状态', width: 90, templet: function(d){
        return get_state_text(d.state); // 直接返回含HTML标签的字符串
    }, style: 'font-size: 12px;'}

, {field: 'createDateTime', title: '创建时间', width: 140, style: 'font-size: 12px;'}
, {field: 'payDateTime', title: '支付时间', width: 140, style: 'font-size: 12px;'}

上面写法。是正确的。




不能这样写。

, {field: 'title', title: '标题', width: 300, style: 'font-size: 12px;', templet: '#format_state'}

<script type="text/html" id="format_state">
    {{= get_state_text(d.state) }}
</script>
显示的是，<ber>待付款</ber>   标签也存在。

view页面这样写。

<script>
    var goDate = "[[${#dates.format(order.goDate, 'yyyy-MM-dd')}]]";
    var state =  [[${order.state}]] ;

    function set_week(){
        var week = getWeekDay2(goDate);
        $("#goDate").html(`${goDate}  【${week}】`);
    }
    function set_state_text(){
        var state_txt = get_state_text(this.state);
        console.log(state_txt);
        $("#state").html(state_txt);
    }

    $(function(){
        set_week();
        set_state_text();
    });

</script>


<tr>
    <td>支付状态</td>
    <td id="state">[[${order.state}]]</td>
</tr>

manage管理 页面下拉查询这样写。

// 动态插入选项（需在DOM加载后执行）
$('#state').html(getStateSelectHTML());

修改页面这样写。

// 动态插入选项（需在DOM加载后执行）
$('#recommend').html(getPositionSelectHTML());
if ("[[${goods?.recommend}]]" != "") {
    $("#recommend").val("[[${goods?.recommend}]]");
}
form.render(); //更新全部表单


<div class="layui-inline">
    <label class="layui-form-label">推荐位置</label>
    <div class="layui-input-inline" style="width: 120px">
        <select name="recommend" id="recommend" lay-filter="recommend">
        </select>
    </div>
</div>