在Foundry Slate的multiselect box中如何实现值预填充

核心实现逻辑 #

• 首先从你的业务取值函数中获取要预填充的选中值数组，注意数组元素的格式、类型要和多选框选项的value字段完全匹配
• 多选框的DOM节点/组件、以及选项列表完成初始化后，立刻把预填充值数组赋值给多选框的选中属性
• 如果需要跨页面重载保留用户最新选中的取值，可以把选中值存在localStorage/sessionStorage中，页面加载时优先从存储读取值再赋值

不同场景的代码示例 #

原生JavaScript实现 #

// 替换为你自己的取值函数，拿到预填充默认值
const getDefaultSelected = () => yourValueFunction()

// 页面DOM加载完成后执行赋值
document.addEventListener('DOMContentLoaded', () => {
  const multiSelect = document.querySelector('#your-multiselect-id')
  // 优先读取本地存储的用户最新选中值，没有则用默认值
  const initSelected = JSON.parse(localStorage.getItem('multiSelectVal')) || getDefaultSelected()
  
  // 遍历选项匹配选中状态
  Array.from(multiSelect.options).forEach(option => {
    option.selected = initSelected.includes(option.value)
  })

  // 如果使用第三方多选框组件，调用官方提供的赋值方法，例如下方是Select2的写法
  // $('#your-multiselect-id').val(initSelected).trigger('change')
})

// 监听多选框变化，存储最新选中值到localStorage
document.querySelector('#your-multiselect-id').addEventListener('change', (e) => {
  const selectedVals = Array.from(e.target.selectedOptions).map(opt => opt.value)
  localStorage.setItem('multiSelectVal', JSON.stringify(selectedVals))
})

Vue 实现 #

<template>
  <!-- 替换为你使用的多选框组件，此处以Element Plus多选框为例 -->
  <el-select v-model="selectedVals" multiple>
    <el-option 
      v-for="item in options" 
      :key="item.value" 
      :label="item.label" 
      :value="item.value"
    />
  </el-select>
</template>
<script setup>
import { ref, watch, onMounted } from 'vue'

const options = ref([]) // 多选框的选项列表
const selectedVals = ref([]) // 绑定的选中值

// 替换为你自己的取值函数
const getDefaultSelected = () => yourValueFunction()

onMounted(() => {
  // 组件挂载后初始化选中值，优先读本地存储
  selectedVals.value = JSON.parse(localStorage.getItem('multiSelectVal')) || getDefaultSelected()
})

// 监听选中值变化，存入本地存储
watch(selectedVals, (newVal) => {
  localStorage.setItem('multiSelectVal', JSON.stringify(newVal))
})
</script>

React 实现 #

import { useState, useEffect } from 'react'
// 替换为你使用的多选框组件，此处以Ant Design多选框为例
import { Select } from 'antd'

const MultiSelectComponent = () => {
  const [selectedVals, setSelectedVals] = useState([])
  const [options, setOptions] = useState([])

  // 替换为你自己的取值函数
  const getDefaultSelected = () => yourValueFunction()

  useEffect(() => {
    // 选项加载完成后初始化选中值
    const initVal = JSON.parse(localStorage.getItem('multiSelectVal')) || getDefaultSelected()
    setSelectedVals(initVal)
  }, [options]) // 依赖项加入options，确保选项加载完成后再赋值

  const handleChange = (val) => {
    setSelectedVals(val)
    // 存储最新选中值
    localStorage.setItem('multiSelectVal', JSON.stringify(val))
  }

  return (
    <Select
      mode="multiple"
      value={selectedVals}
      onChange={handleChange}
      options={options}
    />
  )
}

常见踩坑点 #

• 预填充值的类型必须和选项value完全一致，例如选项value为数字1，预填充值不能传字符串'1'，否则会匹配失败导致显示为空
• 必须等待多选框的选项列表加载完成后再执行赋值操作，否则值无法匹配到对应选项
• 第三方UI组件的多选框不要直接操作原生DOM，必须使用组件官方提供的value属性/赋值方法进行操作

内容的提问来源于stack exchange，提问作者Sweta