从Google表格获取数据填充下拉框的代码问题求助

一、修复Google表格内数据验证脚本（cityDataValidation） #

原脚本的核心问题是使用getMaxRows()会包含大量空行，导致数据验证范围无效，同时缺少边界判断。以下是修正后的代码：

function cityDataValidation() {
  const ss = SpreadsheetApp.getActive();
  const sh = ss.getSheetByName("Responses");
  // 获取实际有数据的最后一行，避免空行干扰
  const lastRow = sh.getLastRow();
  if (lastRow < 2) return; // 无数据时直接退出

  // 目标范围：第2行第7列到最后一行第7列（明确单列范围）
  const rg = sh.getRange(2, 7, lastRow - 1, 1);
  
  const vsh = ss.getSheetByName("City");
  const cityLastRow = vsh.getLastRow();
  if (cityLastRow < 2) throw new Error("City表中无可用数据");
  
  // 获取City表A列实际非空数据范围
  const vrg = vsh.getRange(2, 1, cityLastRow - 1, 1);
  
  const rule = SpreadsheetApp.newDataValidation()
    .requireValueInRange(vrg, true) // 仅显示非空值
    .setAllowInvalid(false) // 强制只能选择列表内的值（可选）
    .build();
  rg.setDataValidation(rule);
}

修改要点： #

• 用getLastRow()替代getMaxRows()，只针对实际有数据的行操作
• 添加非空判断，避免无数据时抛出错误
• 明确范围的列数参数，确保是单列操作
• 开启requireValueInRange的空值过滤，避免下拉框出现空选项

二、前端下拉框加载"List"工作表的数据 #

需要分Google Apps Script后端和前端代码两部分修改：

1. Google Apps Script端新增数据接口 #

在你的GS脚本中添加以下函数，用于读取"List"表的数据：

function getCityList() {
  const ss = SpreadsheetApp.getActive();
  const listSheet = ss.getSheetByName("List");
  if (!listSheet) throw new Error("找不到名为List的工作表");
  
  const lastRow = listSheet.getLastRow();
  if (lastRow < 2) return []; // 无数据返回空数组
  
  // 提取A列非空值并转一维数组
  const values = listSheet.getRange(2, 1, lastRow - 1, 1)
    .getValues()
    .flat()
    .filter(val => val !== "");
  return JSON.stringify(values);
}

2. 前端代码修改 #

更新JS部分，在页面加载时异步获取数据并更新下拉选项：

<script>
  const apiCall = function (functionName, params = {}) {
    params = JSON.stringify(params);
    return new Promise((resolve, reject) => {
      google.script.run
        .withSuccessHandler((response) => resolve(JSON.parse(response)))
        .withFailureHandler((error) => reject(error))
        [functionName](params);
    });
  };

  const getFormData = (form) => {
    const data = {};
    Object.entries(form).forEach(([key, item]) => {
      data[key] = item.value;
    });
    return data
  };

  // 初始化表单结构，先设为空状态
  const form = {
    city: {
      label: "Lugar de trabajo",
      type: "select",
      value: "",
      items: [],
      disabled: true, // 加载完成前禁用
      placeholder: "加载中...",
      rules: [(v) => !!v || "¡Esto es requerido!"],
    },
  };

  // 页面加载完成后获取数据
  document.addEventListener('DOMContentLoaded', async () => {
    try {
      // 直接调用getCityList接口（无参数，简化调用）
      const cityList = await new Promise((resolve, reject) => {
        google.script.run
          .withSuccessHandler(resolve)
          .withFailureHandler(reject)
          .getCityList();
      });
      // 更新下拉选项并恢复可用状态
      form.city.items = cityList;
      form.city.disabled = false;
      form.city.placeholder = "";
      // Vue项目需触发响应式更新：this.$set(form.city, 'items', cityList);
    } catch (error) {
      console.error('加载城市列表失败:', error);
      form.city.placeholder = "加载失败，请刷新";
    }
  });
</script>

修改要点： #

• 初始化时将下拉框设为禁用状态，避免用户提前操作
• 用DOMContentLoaded监听页面加载完成，异步获取数据
• 添加错误处理，加载失败时给出提示
• Vue项目需用$set触发响应式更新，确保视图同步

HTML部分无需修改 #

原HTML代码保持不变，my-input组件会自动根据form.city.items的变化更新下拉选项：

<v-col cols="12" sm="12" md="6" lg="2" xl="3">
  <my-input :item="form.city"></my-input>
</v-col>

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