form generator 表格编辑下拉选择功能

最新推荐文章于 2024-07-10 14:03:37 发布

白昼的星光@

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量843

点赞数 16

文章标签：前端

本文链接：https://blog.csdn.net/weixin_44815800/article/details/139734059

版权

序

我们之前在form generator中扩展了表格的CRUD功能，此时的缺陷在于有些内容需要用户下拉选择而非输入，所以新增el-select功能。使用流程如下

设置数据字典
设置字典数据（静态、get、post）
使用表格列的自定义列功能实现el-select

疑问

为什么不设置成特殊列，直接选择使用不是更简单吗
如果直接将 el-select 标签写死会发现，

这个标签的属性很多，全部控制很复杂，即使能写好灵活性也不够，
因为 option 中可能有复杂的判断逻辑
如果是单选还好说，单涉及到多选、禁用、数据过滤配置就会很复杂。所以还是通过渲染函数的形式，更多的保证灵活性。

本地预览

拉取仓库 https://gitee.com/starlight_day/form-generator.git
npm i
npm run dev
ps：如果node版本太高需要在运行前运行 $env:NODE_OPTIONS=“–openssl-legacy-provider”
http://127.0.0.1:8080/#/qjt 请假条例子
http://127.0.0.1:8080/#/cat 动态数据例子
http://127.0.0.1:8080/#/select 静态下拉例子
http://127.0.0.1:8080/#/selectDynamic 动态下拉例子

下面以三个下拉案例演示改功能的使用

静态数据

1. 新增表格

在这里插入图片描述

2. 添加字典

字典名称为英文
在这里插入图片描述
字典数据为json格式字符串

'[{"value":"1","label":"用户1"},{"value":"2","label":"用户2"},{"value":"3","label":"用户3"}]'

点击编辑按钮，将数据复制到输入框中

3. 列设置

找到列属性设置，数据类型选择自定义列，同时编辑格式选择禁止编辑
在这里插入图片描述
将下面的render函数拷贝到输入框中，此时我们将usersDirect字典和column1字段关联在了一起


/*
渲染函数
  params:
    h: 渲染函数 createElement
    data: 当前单元格数据
    row: 当前行数据
    directs: 全局字典数据
    changeCallback: 触发更新函数
*/
function render(h, data, row, directs, cb) {
  // 获取字典数据，这里取usersDirect
  const direct = directs.find((item) => item.name == "usersDirect");
  if (!direct) return;
  const options = direct.arrData;

  // 创建option，这里可以进行数据映射和筛选
  const optionVNodes = options.map((option) =>
    h("el-option", {
      props: {
        value: option.value,
        label: option.label,
      },
    })
  );

  return h(
    "el-select",
    {
      // el-select 属性
      props: {
        placeholder: "请选择",
        value: row.column1, // 这里将v-model绑定为column1
        size: "small", // 设置尺寸为最小
      },
      on: {
        input: (value) => {
          // 更新值
          row.column1 = value;
          // 主动触发更新 -- 这里必须主动触发更新
          cb();
        },
      },
    },
    optionVNodes
  );
}

在这里插入图片描述
点击后可以看到数据

4. 测试按钮

下面解释下这两个按钮的含义
在这里插入图片描述

字典数据的调用是在表格mounted的时候才触发的，获取测试数据按钮本质上就是手动触发mounted生命周期，这个按钮只在测试时使用
假如你获取了数据数据内部会被保存到arrData变量上，但是在存储表单的时候并不需要保存改数据，因为该数据会在mounted的时候获取，所以建议在测试无误后点击清空测试数据

5. 解析案例

点击保存为json后的解析测试地址如下

http://127.0.0.1:8080/#/select

get请求数据

1. 数据准备

这里我是拿本地express模拟的get请求接口

// 导入express模块
const express = require("express");
const app = express();
const port = 3000;

// 添加允许跨域请求的中间件
app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
  next();
});

// 模拟姓名和学号数据
function generateFakeData(len) {
  const data = [];
  for (let i = 1; i <= len; i++) {
    data.push({
      name: `学生${i}`,
      studentId: `S${String(i).padStart(3, "0")}`,
    });
  }
  return data;
}

// get接口
app.get("/students", (req, res) => {
  const len = parseInt(req.query.len, 10) || 10; // 默认长度为10，如果len不是数字则默认
  const studentsList = generateFakeData(len);
  res.json(studentsList);
});

// post接口
app.post("/students", express.json(), (req, res) => {
  const len = parseInt(req.body.len, 10); // 从请求体中获取len参数
  const studentsList = generateFakeData(len);
  res.json(studentsList);
});

// 启动服务器
app.listen(port, () => {
  console.log(`Test server is running at http://localhost:${port}`);
});

2. 添加字典

新增usersGet字典
点击字典设置以下数据

// 请求地址 http://127.0.0.1:3000/students?len=5

// 数据转换函数 -- 将请求数据转换成[ { value,label } ]格式的数据
function map(response){ return response.map(item=>{
      return {
        value:item.studentId,
        label:item.name
      }
}) }

如下图所示
在这里插入图片描述

3. 列设置

找到列属性设置，数据类型选择自定义列，同时编辑格式选择禁止编辑

在这里插入图片描述

将下面的render函数拷贝到输入框中，此时我们将usersGet字典和column2字段关联在了一起

function render(h, data, row, directs, cb) {
  // 获取字典数据，这里取usersGet
  const direct = directs.find((item) => item.name == "usersGet");
  if (!direct) return;
  const options = direct.arrData;

  // 创建option，这里可以进行数据映射和筛选
  const optionVNodes = options.map((option) =>
    h("el-option", {
      props: {
        value: option.value,
        label: option.label,
      },
    })
  );

  return h(
    "el-select",
    {
      // el-select 属性
      props: {
        placeholder: "请选择",
        value: row.column2, // 这里将v-model绑定为column2
        size: "small", // 设置尺寸为最小
      },
      on: {
        input: (value) => {
          // 更新值
          row.column2 = value;
          // 主动触发更新 -- 这里必须主动触发更新
          cb();
        },
      },
    },
    optionVNodes
  );
}

在这里插入图片描述

4. 测试按钮

通静态数据

5. 解析案例

http://127.0.0.1:8080/#/selectDynamic

注意selectDynamic.vue该文件格式未调整…，会有EsLint报错提示不影响使用

post请求

这里只展示字典和列设置其他个get请求一样

2. 添加字典

点击字典设置以下数据

// 字典名称 usersPost
// 请求地址 http://127.0.0.1:3000/students
// 请求体   {"len":5}
// 数据转换函数
function map(response){ return response.map(item=>{
      return {
        value:item.studentId,
        label:item.name
      }
}) }

在这里插入图片描述

3. 列设置

找到列属性设置，数据类型选择自定义列，同时编辑格式选择禁止编辑

在这里插入图片描述

将下面的render函数拷贝到输入框中，此时我们将usersPost字典和column3字段关联在了一起

function render(h, data, row, directs, cb) {
  // 获取字典数据，这里取usersPost
  const direct = directs.find((item) => item.name == "usersPost");
  if (!direct) return;
  const options = direct.arrData;

  // 创建option，这里可以进行数据映射和筛选
  const optionVNodes = options.map((option) =>
    h("el-option", {
      props: {
        value: option.value,
        label: option.label,
      },
    })
  );

  return h(
    "el-select",
    {
      // el-select 属性
      props: {
        placeholder: "请选择",
        value: row.column3, // 这里将v-model绑定为column3
        size: "small", // 设置尺寸为最小
      },
      on: {
        input: (value) => {
          // 更新值
          row.column3 = value;
          // 主动触发更新 -- 这里必须主动触发更新
          cb();
        },
      },
    },
    optionVNodes
  );
}