layCascader 排序问题,我想按照我点击顺序回显，有办法解决吗

Question

layCascader 排序问题,我想按照我点击顺序回显，有办法解决吗


```html


<form id="addOrUpdateForm" lay-filter="addOrUpdateForm" class="layui-form layui-form-pane">

        <div class="layui-col-xs12 layui-col-sm6 layui-col-md6 layui-col-lg12">
            <label class="layui-form-label layui-form-required">途径地</label>
            <div class="layui-input-block">
                <input id="wayPlaceCode" name="wayPlaceCode" placeholder="请选择" class="layui-hide"/>
            </div>
        </div>


    <div class="layui-form-item text-right">
        <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        <button class="layui-btn" lay-filter="formSubmitBtn" lay-submit>保存</button>
    </div>
</form>

<!-- 表格操作列 -->
<script type="text/html" id="perTableBar">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="perDelete">删除</a>
</script>
<script>
    layui.use(['layer', 'form', 'admin', 'xnUtil', 'xmSelect', 'laydate', 'layCascader', 'upload', 'fileChoose', 'tableX', 'table'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var admin = layui.admin;
        var xnUtil = layui.xnUtil;
        var xmSelect = layui.xmSelect;
        var laydate = layui.laydate;
        var upload = layui.upload;
        var fileChoose = layui.fileChoose;
        var layCascader = layui.layCascader;
        var tableX = layui.tableX;
        var table = layui.table;


        var wayPlaceCascadeRender = [];
        var startCityCascadeRender = [];
        var endCityCascadeRender = [];
        admin.req(getProjectUrl() + 'city/listCityOptions', function (res) {
            if (res.success && res.data) {
                var finalOptions = res.data;
                wayPlaceCascadeRender = layCascader({
                    elem: '#wayPlaceCode',
                    clearable: true,
                    options: finalOptions,
                    showAllLevels: false,

                    props: {
                        multiple: true,
                        checkStrictly: true
                    },
                    layVerify: 'required',
                    layVerType: 'tips'
                });

                var editData = admin.getLayerData('#addOrUpdateForm').data;

                if (editData !== null && editData !== undefined) {
                    if (editData.wayPlaceCode !== null && editData.wayPlaceCode !== '') {
                        wayPlaceCascadeRender.setValue(editData.wayPlaceCode);
                    }
                    if (editData.startCityId !== null && editData.startCityId !== '') {
                        startCityCascadeRender.setValue(Number(editData.startCityId));
                    }

                    if (editData.endCityId !== null && editData.endCityId !== '') {
                        endCityCascadeRender.setValue(Number(editData.endCityId));
                    }
                }
            } else {
                console.error('请求失败或没有数据');
            }
        });


    });
</script>
</body>
</html>

```

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

解决方案

LayCascader 是一个功能强大的级联选择器，可以实现多级选择和搜索等功能。但是，它默认是按照数据源的顺序排列的，如果你想按照点击顺序回显，可以使用以下方法：

1. 在数据源中添加一个 order 字段，用于记录点击顺序。
2. 在 LayCascader 的 change 事件中，更新数据源的顺序。
3. 在 LayCascader 的 render 事件中，使用新的顺序来渲染数据。

以下是一个示例代码：

// 数据源
let data = [
  { value: '1', label: '一级菜单1', children: [] },
  { value: '2', label: '一级菜单2', children: [] },
  { value: '3', label: '一级菜单3', children: [] },
  { value: '4', label: '二级菜单1', children: [] },
  { value: '5', label: '二级菜单2', children: [] },
  { value: '6', label: '三级菜单1', children: [] }
];

// LayCascader 配置
let layCascader = layui.cascader({
  elem: '#cascader',
  data: data,
  change: function (data) {
    // 更新数据源的顺序
    data.forEach((item, index) => {
      item.order = index;
    });
  },
  render: function (data) {
    // 使用新的顺序来渲染数据
    return data.sort((a, b) => a.order - b.order).map((item) => {
      return `<option value="${item.value}">${item.label}</option>`;
    }).join('');
  }
});

在上面的代码中，我们添加了一个 order 字段到数据源中，然后在 change 事件中更新数据源的顺序。在 render 事件中，我们使用新的顺序来渲染数据。

这样，LayCascader 就会按照点击顺序回显数据了。