【状态回显】 未审核,已审核,作废

本文介绍了一种使用JavaScript实现的状态转换效果,通过简单的JS函数formatStatus,可以将不同的状态值转换为带有特定样式的状态标签,如待审、已审和作废等。此方法在网页中显示状态信息时非常实用。

效果展示:
在这里插入图片描述js代码


//状态转换 0  1 -1  <s><s/>标签有划线作废的效果
function formatStatus(value){
    var data = {
        0:"<span style='color:blue'>待审</span>",
        1:"<span style='color:green'>已审</span>",
        "-1":"<span style='color:gray'><s>作废</s></span>"
    }

    return data[value];
}

jsp代码

<th width="20" field="status" data-options="formatter:formatStatus">状态</th>
el-tree组件回显多个选中节点状态可以通过以下几种方法实现: - **处理父级未全选中但数据含父级id的回显问题**:使用`setCheckedKeys`方法结合判断节点是否有子节点来实现回显。示例代码如下: ```javascript const role = []; res.data.authoritys.forEach(f => { //为了解决父级没有全选中(只选中某个子级)但是数据存在父级id然后回显选中问题 if (!this.$refs.tree.getNode(f).childNodes || !this.$refs.tree.getNode(f).childNodes.length) { role.push(f); } }); this.$refs.tree.setCheckedKeys(role); ``` 此方法通过遍历数据,筛选出没有子节点的节点,将其加入数组`role`,再使用`setCheckedKeys`方法设置选中状态,避免父级节点不必要的选中 [^1]。 - **处理后端返回树型结构数据的回显**:如果后端返回的数据是树型结构,可通过递归函数提取所有节点的id,再使用`setCheckedKeys`方法设置选中状态。示例代码如下: ```javascript // 递归函数来提取 checkIds function extractCheckIds(checkIds, result) { checkIds.forEach((checkId) => { result.push(checkId.id); if (checkId.childrenList && checkId.childrenList.length > 0) { extractCheckIds(checkId.childrenList, result); } }); } //使用时 if (res.checkIds && res.checkIds.length > 0) { const checkedAllIds = []; extractCheckIds(res.checkIds, checkedAllIds); this.$refs.tree.setCheckedKeys(checkedAllIds); } ``` 该方法通过递归遍历树型结构数据,将所有节点的id提取到`checkedAllIds`数组中,最后使用`setCheckedKeys`方法设置选中状态 [^3]。 - **解决子节点部分选中父节点全选中的回显问题**:同样是遍历数据,筛选出没有子节点的节点,将其加入数组`arr`,再使用`setCheckedKeys`方法设置选中状态。示例代码如下: ```javascript this.data.forEach(item => { if (!this.$refs.tree.getNode(item) || !this.$refs.tree.getNode(item).childNodes || !this.$refs.tree.getNode(item).childNodes.length) { arr.push(item); } }); this.$refs.tree.setCheckedKeys(arr); ``` 此方法的目的是解决子节点部分选中时父节点全选中的问题,只将没有子节点的节点加入选中数组 [^4]。 ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值