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

Question

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

      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'
                });


                if (editData !== null && editData !== undefined) {
                    if (editData.wayPlaceCode !== null && editData.wayPlaceCode !== '') {
                        console.log(editData.wayPlaceCode) //   [130406,130404,130102,110100,150500,150304,510400,530500,500300,120103,320400]      他非得走默认排序，不按照我勾选的顺序回显
                        wayPlaceCascadeRender.setValue(editData.wayPlaceCode);
                    }
                }
            } else {
                console.error('请求失败或没有数据');
            }
        });

Answer 1

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

解决方案

LayCascader 是一个常用的级联选择器组件，用于实现级联选择功能。要实现按照点击顺序回显，可以使用 LayCascader 的 change 事件来记录用户的选择顺序，然后在回显时根据记录的顺序来排序。

以下是一个示例代码：

// LayCascader 实例
var cascader = layui.cascader({
  elem: '#cascader' // 选择器容器
});

// 记录用户的选择顺序
var selectOrder = [];

// LayCascader 的 change 事件
cascader.on('change', function(data) {
  selectOrder.push(data.value);
});

// 回显时根据记录的顺序来排序
function renderSelectOptions() {
  var options = [];
  for (var i = 0; i < selectOrder.length; i++) {
    options.push({
      value: selectOrder[i],
      text: '选项' + (i + 1)
    });
  }
  return options;
}

// 使用 renderSelectOptions 函数来回显选择结果
cascader.renderSelectOptions = renderSelectOptions;

在上面的代码中，我们使用 LayCascader 的 change 事件来记录用户的选择顺序，然后在回显时使用 renderSelectOptions 函数来根据记录的顺序来排序选项。

在 renderSelectOptions 函数中，我们遍历记录的顺序数组，然后将每个选项的值和文本内容添加到一个新的数组中。最后，我们将这个数组返回作为 LayCascader 的选项数据。

这样，在回显时 LayCascader 就会按照用户的点击顺序来显示选项。