LAYUI 选择框三元优化

<script type="text/html" id="ID-table-amount-templet">
    <!-- 金额计算优化 -->
    {{ formatAmount(d.buy * d.number) }}
    
    <!-- 开关组件优化 -->
    <input type="checkbox" 
           name="fine" 
           lay-skin="switch" 
           lay-text="是|否" 
           lay-filter="demo-templet-fine"
           {{ d.fine ? 'checked' : '' }}>
</script>

代码规范优化
<!-- 结构优化（保持模板整洁） -->
<script type="text/html" id="ID-table-amount-templet">
    <div class="amount-cell">
        {{ formatAmount(d.buy * d.number) }}
    </div>
    
    <div class="switch-cell">
        <input type="checkbox" 
               name="fine" 
               lay-skin="switch" 
               lay-text="是|否" 
               lay-filter="demo-templet-fine"
               {{ d.fine ? 'checked' : '' }}>
    </div>
</script>

优化说明分三个部分：

1. 金额显示优化

// 在JS中增加金额格式化方法（需在layui.use回调中定义）
function formatAmount(amount) {
    return Number(amount).toLocaleString('zh-CN', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
    });
}

2. 开关组件优化

// 事件处理优化（需在layui.use回调中定义）
form.on('switch(demo-templet-fine)', function(obj){
    const index = $(this).closest('tr').data('index');
    const data = table.cache.tableId[index]; // tableId换成你的表格ID
    data.fine = obj.elem.checked ? 1 : 0;
});

优化亮点：

1. 金额显示：

• 使用toLocaleString实现自动千分位分隔

• 强制保留两位小数

• 处理非数字异常值（通过Number转换）

• 支持多语言数字格式

2. 开关组件：

• 移除存在歧义的value属性

• 通过checked状态驱动显示

• 事件监听中自动更新数据源

• 支持动态表格数据绑定

3. 代码规范：

• 增加容器div方便样式控制

• 更清晰的HTML结构

• 符合Layui最佳实践

• 更好的可维护性

补充建议：

javascript

复制

// 初始化表格时配置（防止开关显示异常）
layui.use(['table'], function(){
    const table = layui.table;
    
    table.render({
        elem: '#tableId',
        done: function(){
            layui.form.render('checkbox');
        }
    });
});

这些优化可以解决以下问题：

1. 金额显示不专业（缺少千分位、小数位不一致）

2. 开关状态与数据不同步

3. 动态新增行时开关不显示

4. 代码可维护性差

5. 潜在的数字类型错误

根据实际业务需求，可以扩展formatAmount方法实现：

• 货币符号显示

• 四舍五入/截断处理

• 空值处理

• 负数显示样式等