vue+elementui通过一个输入框的值改变table的值

最新推荐文章于 2023-02-02 10:18:42 发布
最新推荐文章于 2023-02-02 10:18:42 发布
阅读量1.5k 收藏 3
点赞数
分类专栏： Java 文章标签： vue java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/andwey/article/details/116918669
版权

一、需求，看下图：

列表的值是通过打开弹框，添加题库中的题目得来，最后显示：

二、查询题库返回的json：

[
  {
    "id": "1",
    "creatorId": "111111112",
    "modifyId": "0",
    "createDate": 1618223318000,
    "modifyDate": 1620982753000,
    "status": 0,
    "state": null,
    "creator": null,
    "businessCode": null,
    "creatorDept": null,
    "creatorDeptId": null,
    "creatorDeptPath": null,
    "companyId": "1111111",
    "companyName": null,
    "exendsSql": null,
    "pageIsOptional": null,
    "pageHandleStatus": null,
    "itemTitle": "\r\n在召唤指令控制中，轿内优先的原则是指轿厢在起动前，轿内的选层指令应优先于层站召唤的指令。",
    "itemType": 1,
    "aclId": null,
    "remark": null,
    "teItemOptionsDTOList": [
      {
        "id": "1",
        "creatorId": "1111111",
        "modifyId": "0",
        "createDate": 1618223427000,
        "modifyDate": 1620982753000,
        "status": 0,
        "state": null,
        "creator": null,
        "businessCode": null,
        "creatorDept": null,
        "creatorDeptId": null,
        "creatorDeptPath": null,
        "companyId": "1111111",
        "companyName": null,
        "exendsSql": null,
        "pageIsOptional": null,
        "pageHandleStatus": null,
        "itemId": "1",
        "layerSeq": 1,
        "optionTitle": "这是错",
        "keyFlag": 0,
        "remark": null
      },
      {
        "id": "2",
        "creatorId": "1111111",
        "modifyId": "0",
        "createDate": 1618223473000,
        "modifyDate": 1620982753000,
        "status": 0,
        "state": null,
        "creator": null,
        "businessCode": null,
        "creatorDept": null,
        "creatorDeptId": null,
        "creatorDeptPath": null,
        "companyId": "1111111",
        "companyName": null,
        "exendsSql": null,
        "pageIsOptional": null,
        "pageHandleStatus": null,
        "itemId": "1",
        "layerSeq": 1,
        "optionTitle": "错误",
        "keyFlag": 1,
        "remark": null
      }
    ],
    "optionsIds": null,
    "score": "1"
  },
  {
    "id": "2",
    "creatorId": "111111112",
    "modifyId": "0",
    "createDate": 1618309656000,
    "modifyDate": 1620982138000,
    "status": 0,
    "state": null,
    "creator": null,
    "businessCode": null,
    "creatorDept": null,
    "creatorDeptId": null,
    "creatorDeptPath": null,
    "companyId": "1111111",
    "companyName": null,
    "exendsSql": null,
    "pageIsOptional": null,
    "pageHandleStatus": null,
    "itemTitle": "发生电梯电击事故的原因主要有(   )。",
    "itemType": 3,
    "aclId": null,
    "remark": null,
    "teItemOptionsDTOList": [
      {
        "id": "5",
        "creatorId": "1111111",
        "modifyId": "0",
        "createDate": 1618309819000,
        "modifyDate": 1620982138000,
        "status": 0,
        "state": null,
        "creator": null,
        "businessCode": null,
        "creatorDept": null,
        "creatorDeptId": null,
        "creatorDeptPath": null,
        "companyId": "1111111",
        "companyName": null,
        "exendsSql": null,
        "pageIsOptional": null,
        "pageHandleStatus": null,
        "itemId": "2",
        "layerSeq": 1,
        "optionTitle": "A.电气设备金属外壳未接地或接地不良",
        "keyFlag": 0,
        "remark": null
      },
      {
        "id": "6",
        "creatorId": "1111111",
        "modifyId": "0",
        "createDate": 1618309881000,
        "modifyDate": 1620982138000,
        "status": 0,
        "state": null,
        "creator": null,
        "businessCode": null,
        "creatorDept": null,
        "creatorDeptId": null,
        "creatorDeptPath": null,
        "companyId": "1111111",
        "companyName": null,
        "exendsSql": null,
        "pageIsOptional": null,
        "pageHandleStatus": null,
        "itemId": "2",
        "layerSeq": 1,
        "optionTitle": "B.电线、电缆绝缘保护层破损",
        "keyFlag": 1,
        "remark": null
      },
      {
        "id": "7",
        "creatorId": "1111111",
        "modifyId": "0",
        "createDate": 1618309916000,
        "modifyDate": 1620982138000,
        "status": 0,
        "state": null,
        "creator": null,
        "businessCode": null,
        "creatorDept": null,
        "creatorDeptId": null,
        "creatorDeptPath": null,
        "companyId": "1111111",
        "companyName": null,
        "exendsSql": null,
        "pageIsOptional": null,
        "pageHandleStatus": null,
        "itemId": "2",
        "layerSeq": 1,
        "optionTitle": "C.作业人员违反操作规程带电作业",
        "keyFlag": 1,
        "remark": null
      },
      {
        "id": "8",
        "creatorId": "1111111",
        "modifyId": "0",
        "createDate": 1618309956000,
        "modifyDate": 1620982138000,
        "status": 0,
        "state": null,
        "creator": null,
        "businessCode": null,
        "creatorDept": null,
        "creatorDeptId": null,
        "creatorDeptPath": null,
        "companyId": "1111111",
        "companyName": null,
        "exendsSql": null,
        "pageIsOptional": null,
        "pageHandleStatus": null,
        "itemId": "2",
        "layerSeq": 1,
        "optionTitle": "D.铆钉",
        "keyFlag": 1,
        "remark": null
      }
    ],
    "optionsIds": null,
    "score": "1"
  },
  {
    "id": "3",
    "creatorId": "111111112",
    "modifyId": "0",
    "createDate": 1618309695000,
    "modifyDate": 1620702277000,
    "status": 0,
    "state": null,
    "creator": null,
    "businessCode": null,
    "creatorDept": null,
    "creatorDeptId": null,
    "creatorDeptPath": null,
    "companyId": "1111111",
    "companyName": null,
    "exendsSql": null,
    "pageIsOptional": null,
    "pageHandleStatus": null,
    "itemTitle": "电梯电动机和减速箱之间的联接方式一般采用(   )连接。",
    "itemType": 2,
    "aclId": null,
    "remark": null,
    "teItemOptionsDTOList": [
      {
        "id": "3",
        "creatorId": "1111111",
        "modifyId": "0",
        "createDate": 1618309744000,
        "modifyDate": 1620702277000,
        "status": 0,
        "state": null,
        "creator": null,
        "businessCode": null,
        "creatorDept": null,
        "creatorDeptId": null,
        "creatorDeptPath": null,
        "companyId": "1111111",
        "companyName": null,
        "exendsSql": null,
        "pageIsOptional": null,
        "pageHandleStatus": null,
        "itemId": "3",
        "layerSeq": 1,
        "optionTitle": "\r\nA.联轴器",
        "keyFlag": 1,
        "remark": null
      },
      {
        "id": "4",
        "creatorId": "1111111",
        "modifyId": "0",
        "createDate": 1618309780000,
        "modifyDate": 1620702277000,
        "status": 0,
        "state": null,
        "creator": null,
        "businessCode": null,
        "creatorDept": null,
        "creatorDeptId": null,
        "creatorDeptPath": null,
        "companyId": "1111111",
        "companyName": null,
        "exendsSql": null,
        "pageIsOptional": null,
        "pageHandleStatus": null,
        "itemId": "3",
        "layerSeq": 1,
        "optionTitle": "B.特殊材料粘接",
        "keyFlag": 0,
        "remark": null
      }
    ],
    "optionsIds": null,
    "score": "1"
  },
  {
    "id": "40282f8178d006ee0178d0075c3c0000",
    "creatorId": "10000",
    "modifyId": "0",
    "createDate": 1618397847000,
    "modifyDate": 1620981797000,
    "status": 0,
    "state": null,
    "creator": null,
    "businessCode": null,
    "creatorDept": null,
    "creatorDeptId": null,
    "creatorDeptPath": null,
    "companyId": "COM001",
    "companyName": null,
    "exendsSql": null,
    "pageIsOptional": null,
    "pageHandleStatus": null,
    "itemTitle": "的点点滴滴",
    "itemType": 1,
    "aclId": "402881c179224cea01794650731e00dc,402881c1791124c101791142b1220005,402881c1791124c101791232da5801c1,402881c179224cea0179405ec61600d4,COM001USER000000,COM001USER000004",
    "remark": null,
    "teItemOptionsDTOList": [
      {
        "id": "40282f8178d006ee0178d0075c980002",
        "creatorId": "10000",
        "modifyId": "0",
        "createDate": 1618397847000,
        "modifyDate": 1620981797000,
        "status": 0,
        "state": null,
        "creator": null,
        "businessCode": null,
        "creatorDept": null,
        "creatorDeptId": null,
        "creatorDeptPath": null,
        "companyId": "COM001",
        "companyName": null,
        "exendsSql": null,
        "pageIsOptional": null,
        "pageHandleStatus": null,
        "itemId": "40282f8178d006ee0178d0075c3c0000",
        "layerSeq": 1,
        "optionTitle": "正确",
        "keyFlag": 1,
        "remark": null
      },
      {
        "id": "40282f8178d006ee0178d0075cc00004",
        "creatorId": "10000",
        "modifyId": "0",
        "createDate": 1618397847000,
        "modifyDate": 1620981798000,
        "status": 0,
        "state": null,
        "creator": null,
        "businessCode": null,
        "creatorDept": null,
        "creatorDeptId": null,
        "creatorDeptPath": null,
        "companyId": "COM001",
        "companyName": null,
        "exendsSql": null,
        "pageIsOptional": null,
        "pageHandleStatus": null,
        "itemId": "40282f8178d006ee0178d0075c3c0000",
        "layerSeq": 2,
        "optionTitle": "错误",
        "keyFlag": 0,
        "remark": null
      }
    ],
    "optionsIds": null,
    "score": "1"
  },
  {
    "id": "40282f8178d006ee0178d00828d60006",
    "creatorId": "10000",
    "modifyId": null,
    "createDate": 1618397899000,
    "modifyDate": null,
    "status": 0,
    "state": null,
    "creator": null,
    "businessCode": null,
    "creatorDept": null,
    "creatorDeptId": null,
    "creatorDeptPath": null,
    "companyId": "COM001",
    "companyName": null,
    "exendsSql": null,
    "pageIsOptional": null,
    "pageHandleStatus": null,
    "itemTitle": "测试新增试题111",
    "itemType": 1,
    "aclId": null,
    "remark": null,
    "teItemOptionsDTOList": [
      {
        "id": "40282f8178d006ee0178d00829110008",
        "creatorId": "10000",
        "modifyId": null,
        "createDate": 1618397899000,
        "modifyDate": null,
        "status": 0,
        "state": null,
        "creator": null,
        "businessCode": null,
        "creatorDept": null,
        "creatorDeptId": null,
        "creatorDeptPath": null,
        "companyId": "COM001",
        "companyName": null,
        "exendsSql": null,
        "pageIsOptional": null,
        "pageHandleStatus": null,
        "itemId": "40282f8178d006ee0178d00828d60006",
        "layerSeq": 1,
        "optionTitle": "正确",
        "keyFlag": 0,
        "remark": null
      },
      {
        "id": "40282f8178d006ee0178d0082934000a",
        "creatorId": "10000",
        "modifyId": null,
        "createDate": 1618397899000,
        "modifyDate": null,
        "status": 0,
        "state": null,
        "creator": null,
        "businessCode": null,
        "creatorDept": null,
        "creatorDeptId": null,
        "creatorDeptPath": null,
        "companyId": "COM001",
        "companyName": null,
        "exendsSql": null,
        "pageIsOptional": null,
        "pageHandleStatus": null,
        "itemId": "40282f8178d006ee0178d00828d60006",
        "layerSeq": 2,
        "optionTitle": "错误",
        "keyFlag": 1,
        "remark": null
      }
    ],
    "optionsIds": null,
    "score": "1"
  },
  {
    "id": "40282f8178d32bb60178d33338620000",
    "creatorId": "10000",
    "modifyId": null,
    "createDate": 1618451053000,
    "modifyDate": null,
    "status": 0,
    "state": null,
    "creator": null,
    "businessCode": null,
    "creatorDept": null,
    "creatorDeptId": null,
    "creatorDeptPath": null,
    "companyId": "COM001",
    "companyName": null,
    "exendsSql": null,
    "pageIsOptional": null,
    "pageHandleStatus": null,
    "itemTitle": "新增判断题",
    "itemType": 1,
    "aclId": null,
    "remark": null,
    "teItemOptionsDTOList": [
      {
        "id": "40282f8178d32bb60178d33338e70002",
        "creatorId": "10000",
        "modifyId": null,
        "createDate": 1618451053000,
        "modifyDate": null,
        "status": 0,
        "state": null,
        "creator": null,
        "businessCode": null,
        "creatorDept": null,
        "creatorDeptId": null,
        "creatorDeptPath": null,
        "companyId": "COM001",
        "companyName": null,
        "exendsSql": null,
        "pageIsOptional": null,
        "pageHandleStatus": null,
        "itemId": "40282f8178d32bb60178d33338620000",
        "layerSeq": 1,
        "optionTitle": "正确",
        "keyFlag": 1,
        "remark": null
      },
      {
        "id": "40282f8178d32bb60178d333394f0004",
        "creatorId": "10000",
        "modifyId": null,
        "createDate": 1618451053000,
        "modifyDate": null,
        "status": 0,
        "state": null,
        "creator": null,
        "businessCode": null,
        "creatorDept": null,
        "creatorDeptId": null,
        "creatorDeptPath": null,
        "companyId": "COM001",
        "companyName": null,
        "exendsSql": null,
        "pageIsOptional": null,
        "pageHandleStatus": null,
        "itemId": "40282f8178d32bb60178d33338620000",
        "layerSeq": 2,
        "optionTitle": "错误",
        "keyFlag": 0,
        "remark": null
      }
    ],
    "optionsIds": null,
    "score": "1"
  },
  {
    "id": "40282f8178d49b4e0178d4a7a7f40000",
    "creatorId": "10000",
    "modifyId": null,
    "createDate": 1618475461000,
    "modifyDate": null,
    "status": 0,
    "state": null,
    "creator": null,
    "businessCode": null,
    "creatorDept": null,
    "creatorDeptId": null,
    "creatorDeptPath": null,
    "companyId": "COM001",
    "companyName": null,
    "exendsSql": null,
    "pageIsOptional": null,
    "pageHandleStatus": null,
    "itemTitle": "测试新增判断题1",
    "itemType": 1,
    "aclId": null,
    "remark": null,
    "teItemOptionsDTOList": [
      {
        "id": "40282f8178d49b4e0178d4a7a8560002",
        "creatorId": "10000",
        "modifyId": null,
        "createDate": 1618475461000,
        "modifyDate": null,
        "status": 0,
        "state": null,
        "creator": null,
        "businessCode": null,
        "creatorDept": null,
        "creatorDeptId": null,
        "creatorDeptPath": null,
        "companyId": "COM001",
        "companyName": null,
        "exendsSql": null,
        "pageIsOptional": null,
        "pageHandleStatus": null,
        "itemId": "40282f8178d49b4e0178d4a7a7f40000",
        "layerSeq": 1,
        "optionTitle": "正确",
        "keyFlag": 1,
        "remark": null
      },
      {
        "id": "40282f8178d49b4e0178d4a7a8ec0004",
        "creatorId": "10000",
        "modifyId": null,
        "createDate": 1618475461000,
        "modifyDate": null,
        "status": 0,
        "state": null,
        "creator": null,
        "businessCode": null,
        "creatorDept": null,
        "creatorDeptId": null,
        "creatorDeptPath": null,
        "companyId": "COM001",
        "companyName": null,
        "exendsSql": null,
        "pageIsOptional": null,
        "pageHandleStatus": null,
        "itemId": "40282f8178d49b4e0178d4a7a7f40000",
        "layerSeq": 2,
        "optionTitle": "错误",
        "keyFlag": 0,
        "remark": null
      }
    ],
    "optionsIds": null,
    "score": "1"
  },
  {
    "id": "402881ac7968868e01796a1a2e180000",
    "creatorId": "0",
    "modifyId": null,
    "createDate": 1620982771000,
    "modifyDate": null,
    "status": 0,
    "state": null,
    "creator": null,
    "businessCode": null,
    "creatorDept": null,
    "creatorDeptId": null,
    "creatorDeptPath": null,
    "companyId": "COM001",
    "companyName": null,
    "exendsSql": null,
    "pageIsOptional": null,
    "pageHandleStatus": null,
    "itemTitle": "1111",
    "itemType": 2,
    "aclId": "COM001USER000002,COM001USER000001,402881c1791124c101791142b1220005,402881c1791124c101791232da5801c1,402881c179224cea0179405ec61600d4,COM001USER000000,COM001USER000004",
    "remark": null,
    "teItemOptionsDTOList": [
      {
        "id": "402881ac7968868e01796a1a2eaf0001",
        "creatorId": "0",
        "modifyId": null,
        "createDate": 1620982771000,
        "modifyDate": null,
        "status": 0,
        "state": null,
        "creator": null,
        "businessCode": null,
        "creatorDept": null,
        "creatorDeptId": null,
        "creatorDeptPath": null,
        "companyId": "COM001",
        "companyName": null,
        "exendsSql": null,
        "pageIsOptional": null,
        "pageHandleStatus": null,
        "itemId": "402881ac7968868e01796a1a2e180000",
        "layerSeq": 1,
        "optionTitle": "a.1",
        "keyFlag": 1,
        "remark": null
      }
    ],
    "optionsIds": null,
    "score": "1"
  },
  {
    "id": "402881c17969082201796a1490af0046",
    "creatorId": "0",
    "modifyId": "0",
    "createDate": 1620982403000,
    "modifyDate": 1620982857000,
    "status": 0,
    "state": null,
    "creator": null,
    "businessCode": null,
    "creatorDept": null,
    "creatorDeptId": null,
    "creatorDeptPath": null,
    "companyId": "COM001",
    "companyName": null,
    "exendsSql": null,
    "pageIsOptional": null,
    "pageHandleStatus": null,
    "itemTitle": "123132",
    "itemType": 2,
    "aclId": "COM001USER000002,COM001USER000001,402881c1791124c101791142b1220005,402881c1791124c101791232da5801c1,402881c179224cea0179405ec61600d4,COM001USER000000,COM001USER000004",
    "remark": null,
    "teItemOptionsDTOList": [
      {
        "id": "402881c17969082201796a1b7bc80057",
        "creatorId": "0",
        "modifyId": null,
        "createDate": 1620982857000,
        "modifyDate": null,
        "status": 0,
        "state": null,
        "creator": null,
        "businessCode": null,
        "creatorDept": null,
        "creatorDeptId": null,
        "creatorDeptPath": null,
        "companyId": "COM001",
        "companyName": null,
        "exendsSql": null,
        "pageIsOptional": null,
        "pageHandleStatus": null,
        "itemId": "402881c17969082201796a1490af0046",
        "layerSeq": 1,
        "optionTitle": "2",
        "keyFlag": 1,
        "remark": null
      }
    ],
    "optionsIds": null,
    "score": "1"
  },
  {
    "id": "402881c17969082201796a1af9ad004f",
    "creatorId": "0",
    "modifyId": null,
    "createDate": 1620982823000,
    "modifyDate": null,
    "status": 0,
    "state": null,
    "creator": null,
    "businessCode": null,
    "creatorDept": null,
    "creatorDeptId": null,
    "creatorDeptPath": null,
    "companyId": "COM001",
    "companyName": null,
    "exendsSql": null,
    "pageIsOptional": null,
    "pageHandleStatus": null,
    "itemTitle": "1",
    "itemType": 1,
    "aclId": "COM001USER000002,COM001USER000001,402881c1791124c101791142b1220005,402881c1791124c101791232da5801c1,402881c179224cea0179405ec61600d4,COM001USER000000,COM001USER000004",
    "remark": null,
    "teItemOptionsDTOList": [
      {
        "id": "402881c17969082201796a1af9b70051",
        "creatorId": "0",
        "modifyId": null,
        "createDate": 1620982823000,
        "modifyDate": null,
        "status": 0,
        "state": null,
        "creator": null,
        "businessCode": null,
        "creatorDept": null,
        "creatorDeptId": null,
        "creatorDeptPath": null,
        "companyId": "COM001",
        "companyName": null,
        "exendsSql": null,
        "pageIsOptional": null,
        "pageHandleStatus": null,
        "itemId": "402881c17969082201796a1af9ad004f",
        "layerSeq": 1,
        "optionTitle": "正确",
        "keyFlag": 0,
        "remark": null
      },
      {
        "id": "402881c17969082201796a1af9be0053",
        "creatorId": "0",
        "modifyId": null,
        "createDate": 1620982823000,
        "modifyDate": null,
        "status": 0,
        "state": null,
        "creator": null,
        "businessCode": null,
        "creatorDept": null,
        "creatorDeptId": null,
        "creatorDeptPath": null,
        "companyId": "COM001",
        "companyName": null,
        "exendsSql": null,
        "pageIsOptional": null,
        "pageHandleStatus": null,
        "itemId": "402881c17969082201796a1af9ad004f",
        "layerSeq": 2,
        "optionTitle": "错误",
        "keyFlag": 1,
        "remark": null
      }
    ],
    "optionsIds": null,
    "score": "1"
  }
]

开始的时候返回的json中没有score字段，后来因为需要给加上去的

三、废话不多说，直接把vue的代码全贴出来，记录一下踩的坑：

<template>
  <div class="base-form">
    <el-form :inline="true" :model="assessForm" ref="rulesForm" :rules="assessRules">
      <el-form-item label="考核名称：" prop="paperTitle"  autocomplete="off" required>
        <el-input v-model="assessForm.paperTitle"></el-input>
      </el-form-item>
      <el-form-item label="考核时长(min)：" prop="testTime"  autocomplete="off" required>
        <el-input v-model.number="assessForm.testTime"></el-input>
      </el-form-item>
      <el-form-item label="合格分数线：" prop="qualifiedScore"  autocomplete="off" required>
        <el-input v-model.number="assessForm.qualifiedScore"></el-input>
      </el-form-item>
        <el-form-item label="状态：" prop="itemType"  autocomplete="off" required>
            <el-select v-model="assessForm.itemType">
                <el-option v-for="status in assessTypeList" :key="status.value" :value="status.value" :label="status.label"></el-option>
            </el-select>
        </el-form-item>
      <el-form-item label="每题默认分数：">
        <el-input v-model="assessForm.score" @input="scoreChange"></el-input>
      </el-form-item>
    </el-form>
      <!-- 弹出添加题目的弹框开始 -->
    <el-dialog title="选择题目" :visible.sync="dialogTableVisible" width="80%" :close-on-click-modal="false" @close="closeDialog">
          <div class="baseList">
              <div class="searchModule">
                  <el-form :inline="true" class="demo-form-inline">
                      <el-form-item label="考核名称：">
                          <el-input v-model="searchForm.itemTitle"></el-input>
                      </el-form-item>
                      <el-form-item label="状态：">
                          <el-select v-model="searchForm.itemType">
                              <el-option v-for="status in itemTypeList" :key="status.value" :value="status.value" :label="status.label"></el-option>
                          </el-select>
                      </el-form-item>
                      <el-form-item label="评分：">
                          <div class="inline-item">
                              <el-input v-model="searchForm.accuracyStart"></el-input>
                              <span>~</span>
                              <el-input v-model="searchForm.accuracyEnd"></el-input>
                          </div>
                      </el-form-item>
                  </el-form>
                  <div class="search-btns">
                      <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                      <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
                  </div>
              </div>

              <div class="tableModule">
                  <el-table :data="questionsList" @selection-change="handleSelectionChange">
                      <el-table-column type="selection" width="55"></el-table-column>
                      <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
                      <el-table-column prop="itemTitle" label="题目"  align="center"></el-table-column>
                      <el-table-column prop="itemType" label="类型" :formatter="itemTypeFormatter" align="center"></el-table-column>
                      <el-table-column label="选项">
                          <template slot-scope="scope">
                              <!--eslint-disable-next-line-->
                              <span v-for="itemOptions in scope.row.teItemOptionsDTOList">
                                    {{ itemOptions.optionTitle }};
                             </span>
                          </template>
                      </el-table-column>
                      <el-table-column prop="time" label="答案">
                          <template slot-scope="scope">
                              <!--eslint-disable-next-line-->
                              <span v-for="itemOptions in scope.row.teItemOptionsDTOList">
                             <span v-if="itemOptions.keyFlag==1"> {{ itemOptions.optionTitle }} </span>
                                </span>
                          </template>
                      </el-table-column>
                      <el-table-column prop="people" label="正确率" align="center"></el-table-column>
                  </el-table>
                  <pagination ref="page" @handleList="get"></pagination>
              </div>

              <el-button type="primary" @click="saveQuestions">确定</el-button>
              <el-button @click="cencle">取消</el-button>

          </div>
      </el-dialog>
      <!-- 弹出添加题目的弹框结束 -->
    <div class="base-form-item">
      <label class="require">考核题目：</label>
      <el-button type="primary" @click="addQuestions">添加</el-button>
      <div class="item-bottom">
        <el-table border :data="assessList" show-summary :summary-method="getSummaries">
          <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
          <el-table-column prop="itemTitle" label="题目"></el-table-column>
          <el-table-column prop="itemType" label="类型" :formatter="itemTypeFormatter" align="center"></el-table-column>
          <el-table-column prop="score" label="分数" align="center">
              <template slot-scope="scope">
                  <el-input v-model="scope.row.score"></el-input>
              </template>
          </el-table-column>
          <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
                <el-button type="text" @click="delQuestions(scope.$index)">删除</el-button>
          </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
      <pagination ref="page" @handleList="get" v-show="false"></pagination>
    <div class="base-form-btns">
        <el-button type="primary" @click="save('rulesForm')">提交</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
      // 校验考核时长
      var checkTime = (rule, value, callback) => {
          console.log(rule)
          if (!value) {
              return callback(new Error('考核时长不能为0或为空!'));
          }
          setTimeout(() => {
              if (!Number.isInteger(value)) {
                  callback(new Error('请输入数字值'));
              } else {
                  if(value >180){
                      callback(new Error('必须输入小于或等于180的值!'));
                  }else {
                      callback();
                  }
              }
          }, 1000);
      };
      // 校验考核名称
      var checkPaperTitle = (rule, value, callback) => {
          if (value === '') {
              callback(new Error('考核名称不能为空!'));
          }else {
              callback()
          }
      };
      // 校验合格分数线
      var checkQualifiedScore = (rule, value, callback) => {
          console.log(rule)
          if (!value) {
              return callback(new Error('合格分数线不能为0或为空!'));
          }else {
              callback()
          }
      };
    return {
        questionsList: [],
        assessList: [],
        multipleSelection: [],
        assessForm: {
            paperTitle: '',
            testTime: '',
            qualifiedScore: '',
            testStatus: '',
            score: '',
        },
        score: '',
        // 分数合计
        qualifiedScore: '',
        searchForm: {
            itemTitle: '',
            itemType: '',
            accuracyStart: '',
            accuracyEnd: '',
        },
        // 校验表单
        assessRules: {
            paperTitle:[
                { validator: checkPaperTitle, trigger: 'blur' }
            ],
            testTime:[
                { validator: checkTime, trigger: 'blur' }
            ],
            qualifiedScore:[
                { validator: checkQualifiedScore, trigger: 'blur' }
            ],
            itemType: [
                { required: true, message: '请选择状态', trigger: 'change' }
            ],
        },
        // 题目类型：1判断、2单选、3多选
        itemTypeList: [{
            value: '1',
            label: '判断'
        },{
            value: '2',
            label: '单选'
        },{
            value: '3',
            label: '多选'
        }],
        assessTypeList: [
            {
                value: '1',
                label: '上架'
            },
            {
                value: '0',
                label: '下架'
            },
        ],
        // 控制添加题目的弹框
        dialogTableVisible: false,
    }
  },
    mounted(){
        this.get();
    },
    methods: {
      // 监听默认分数的变化
      scoreChange(){
          this.score = this.assessForm.score
          this.multipleSelection.forEach(m => {
              m.score = this.score

          })
          console.log(JSON.stringify(this.multipleSelection))
          this.assessList = this.multipleSelection
      },
      // 提交
      save(formName) {
          this.$refs[formName].validate((valid) => {
              if (valid) {
                  alert('submit!');
              } else {
                  console.log('error submit!!');
                  return false;
              }
          });
      },
      // 添加题库中的题目
      addQuestions(){
          // 弹框
          this.dialogTableVisible = true
      },
      get() {
          const paginationInfo = this.$refs.page.getPaginationInfo()
          this.$post('/teItemBank/list', {
              pageNumber: paginationInfo.currentPage,
              pageSize: paginationInfo.pageSize,
              rowCount: paginationInfo.totalCount,
              parameters: Object.assign(this.searchForm)
          }).then(data => {
              console.log(data)
              this.questionsList = data.object.list
              this.$refs.page.setTotalCount(data.object.rowCount)
          })
      },
      search() {
          this.$refs.page.initPageNumber()
          this.get()
      },
      reset() {
          this.searchForm = this.$options.data().searchForm
          this.$refs.chooseOrg.clearChooseOrg()
      },
      // 添加题库时选中的题目
      handleSelectionChange(val){
          this.multipleSelection = val
      },
      // 添加题目确定按钮
      saveQuestions(){
          if(this.multipleSelection.length == 0){
              this.$message.error("请至少选择一个题目！")
              return;
          }
          this.dialogTableVisible = false
          this.assessList = this.multipleSelection;
      },
      cencle(){
          this.dialogTableVisible = false
          this.reset()
      },
      // 关闭dialog弹框时回调
      closeDialog(){
          this.reset()
      },
      // 题目类型显示
      itemTypeFormatter(row){
          if (row.itemType == 1) {
              return "判断";
          } else if(row.itemType == 2){
              return "单选";
          }else if(row.itemType == 3){
              return "多选";
          }
      },
      // 自定义合计分数的方法
      getSummaries (param) {
          const { columns, data } = param
          const sums = []
          columns.forEach((column, index) => {
              if (index === 0) {
                  sums[index] = '合计'
              } else if (index === 3) { // 需要合计的列
                  const values = data.map(item => Number(item[column.property]))
                  if (!values.every(value => isNaN(value))) {
                      sums[index] = values.reduce((prev, curr) => {
                          const value = Number(curr)
                          if (!isNaN(value)) {
                              return prev + curr
                          } else {
                              return prev
                          }
                      }, 0)
                  } else {
                      sums[index] = 'N/A'
                  }
              } else {
                  sums[index] = '--'
              }
          })
          this.qualifiedScore = sums
          return sums
      },
      // 删除题目
      delQuestions(index){
          this.assessList.splice(index,1);
      },
  }
}
</script>

<style lang="scss" scoped>
  @import '@/css/baseForm.scss';
</style>

四、实现思路：

点增加按钮时，弹出题库的弹框，选出需要的题目，选中的值与mutipleSelection绑定，关闭弹框时把值赋给assessList,当输入框的值改变时，把mutipleSelection中的score的值给assessList就可以了；

1、定义mutipleSelection、assessList两个数组

 

2、遍历assessList:
 

 

3、不懂的请看完整的代码，我是个后端的，让我写前端的代码，还告诉我前后端分离！！！
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 

                

        

        

    

  


    

      

        

            

              
                
                  咖啡掠地狮
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
vue+elementUI实现动态表格合并单元格.zip

				
			

			

				

					09-26
				

			

		

		

			
				
在本项目中，"vue+elementUI实现动态表格合并单元格.zip" 提供了一个使用 Vue.js 框架和 Element UI 组件库构建的动态表格应用。Vue.js 是一款轻量级的前端JavaScript框架，它提供了响应式的数据绑定和组件化功能，...

			
		

	



                

              
                



	

		

			

				
					
vue+elementUi 实现密码显示/隐藏+小图标变化功能

				
			

			

				

					10-15
				

			

		

		

			
				
1. 在Vue模板中，使用`el-input`组件创建一个密码输入框，并通过`v-model`指令与Vue实例的数据属性进行双向数据绑定。这里绑定的数据属性用来存储用户输入的密码值。  2. `el-input`的`:type`属性设置为`pwdType`...

			
		

	



                


  
              

                


	

		

			

				
					
vue 编辑时，el-table里面的内容随之改变，应该等修改完成后内容才变化

				
			

			

				

					Aa12364567的博客
				

				

					12-29
					
					612
					
				

			

		

		

			
				
vue 编辑时，el-table里面的内容随之改变，应该等修改完成后内容才变化。

			
		

	





	

		

			

				
					
写一个elementui 数据列表,可以在列表中修改数据内容

				
			

			

				

					weixin_42612405的博客
				

				

					12-29
					
					314
					
				

			

		

		

			
				
ElementUI 是一个基于 Vue.js 的 UI 组件库，提供了很多丰富的 UI 组件供开发者使用。其中，ElementUI 也提供了一个可以用来展示数据列表的组件——el-table。
下面是一个使用 ElementUI 实现的数据列表的示例代码：
<template>
  <el-table :data="tableData" border style="width: ...

			
		

	



		

			
		



	

		

			

				
					
inpute框输入table表格动态改变

				
			

			

				

					qq_50951790的博客
				

				

					01-07
					
					306
					
				

			

		

		

			
				
监听输入框变化，实现表格动态展示

			
		

	





	

		

			

				
					
Vue 编辑数据时 表格数据跟着变动

				
			

			

				

					BugQian的博客
				

				

					12-24
					
					812
					
				

			

		

		

			
				
编辑的是 引用 所以会变动

复制一个副本出来


JSON.parse(JSON.stringify(data))




			
		

	





	

		

			

				
					
ElementUI之使用Dialog框实现表格当行修改

				
			

			

				

					qq_41154522的博客
				

				

					03-03
					
					2071
					
				

			

		

		

			
				
修改按钮
<el-table-column
       label="操作"
       fixed="right"
       :render-header="tableAction"
       width="120"
       align="center">
   <template slot-scope="scope">
       <!--单...

			
		

	





	

		

			

				
					
【狂神vue学习记录】vue+elementUI实战

				
			

			

				

					08-16
				

			

		

		

			
				
例如，你可以创建一个名为`demo`的组件，该组件可能包含多个Element UI的组件，如`el-button`用于按钮，`el-form`和`el-form-item`用于表单，`el-table`用于展示数据等。  Element UI 提供了丰富的组件，如表格...

			
		

	





	

		

			

				
					
Vue+ElementUI table实现表格分页

				
			

			

				

					10-15
				

			

		

		

			
				
在当今的Web开发中，表格数据的展示和管理是一个非常常见且重要的话题。当我们需要展示大量数据时，分页功能就显得尤为关键。分页能够帮助我们在有限的页面空间内，按需加载和展示数据，从而提升用户体验和页面性能...

			
		

	





	

		

			

				
					
信息管理系统(SpringBoot+Mybatis+POI+Vue+ElementUI)

					
最新发布

				
			

			

				

					11-02
				

			

		

		

			
				
**SpringBoot** 是一个基于Spring框架的高度简化版本，它简化了Spring的配置过程，通过内嵌的Tomcat服务器，使得开发和部署变得更加简单。在本系统中，SpringBoot提供了一个快速构建Web服务的平台，支持RESTful API...

			
		

	





	

		

			

				
					
Vue知识分享02-表格数据随dialog中改变而改变

				
			

			

				

					m0_64501863的博客
				

				

					10-09
					
					568
					
				

			

		

		

			
				
在点击动态表单某行修改按钮后，弹出编辑dialog对话框，dialog中数据改变，该行数据也随之改变的现象，点击取消，没有修改成功但是页面表单数据已经改变，刷新后才会还原

			
		

	





	

		

			

				
					
vue3 antd table表格的增删改查（二）input输入框根据关键字搜索【后台管理系统 请求后端接口 前后端交互】

				
			

			

				

					XSL_HR的博客
				

				

					11-29
					
					3923
					
				

			

		

		

			
				
vue3 + ant design vue + table 后台管理系统通过请求后端接口实现关键字搜索。纯前端实现关键字搜索，显然很简单，但是在项目中，一般都会编写与搜索相关的接口，将任务功能的实现分工，因此在有接口的情况下，我们也要学会如何使用接口来实现搜索。

			
		

	





	

		

			

				
					
element el-table嵌套input输入框动态添加行 form动态表单验证实现

				
			

			

				

					alokka的博客
				

				

					07-08
					
					3723
					
				

			

		

		

			
				
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <!-- 引入样式 -->
    &

			
		

	





	

		

			

				
					
【Vue】elementUI实现动态表单功能（实现表格的增加行、删除行的功能）

				
			

			

				

					zzf_forgot的博客
				

				

					01-20
					
					6615
					
				

			

		

		

			
				
需求：当需要给用户填写表格时，并且用户填写行数未知，会需要使用到动态表单功能，这个和通常的写死form表单不同，如下图所示：



实现：

1）前端代码如下图所示：采用el-form嵌套el-table的方法，整体结构如下图所示：


   <el-form :model="instance.items" ref="data" label-width="auto">
        <el-table
          :data="instance.items.filter((dat

			
		

	





	

		

			

				
					
vue+element 点击单元格就能修改数据，来学习一下吧【分享代码】

				
			

			

				

					mmmmmmmmzw的博客
				

				

					09-29
					
					4240
					
				

			

		

		

			
				
目录需求实现效果总览功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入
需求
客户需求多变，原先数据库表不再满足需求，需要被拆解并且表格之间映射关系多对多。
对于前端，需要提供一种修改方式，让用户修正将近1000条数据，并且要让用户感

			
		

	





	

		

			

				
					
vue el-input输入框el-autocomplete下拉列表样式修改

				
			

			

				

					wangyong_h
				

				

					10-12
					
					4068
					
				

			

		

		

			
				
一、根据需求修改自定义样式，最终效果如下图



常规修改样式代码如下，输入框样式已修改；


/deep/.el-input__inner:focus {
    border: 1px solid #1fb1ef;
  }
  /deep/.el-input__inner {
    border: 1px solid #1fb1ef;
    background: rgba(0, 80, 111, 0.8);
    border-radius: 18px;
    height: 30px;
 .

			
		

	





	

		

			

				
					
elementui中table嵌套input并且当input输入一个数值后，其他input中的值根据计算公式相应改变

				
			

			

				

					m0_50441807的博客
				

				

					11-10
					
					2487
					
				

			

		

		

			
				
这里有个误区，就是很多人可能以为change事件是当输入框中的值改变后就会触发，但实际是change只有在input失去焦点的时候才会触发；
这里还需要注意两点：

			
		

	





	

		

			

				
					
vue for 循环生成el-input 修改某一个input导致所有都变化的情况

				
			

			

				

					weixin_44092085的博客
				

				

					09-11
					
					9393
					
				

			

		

		

			
				
遇到的问题：
1 el-input  用@change不管用，用的input
2 如果用一个变量来控制，会出现修改一个input，其他同时变化的情况     所以，我直接对获得的数组操作，直接给list添加一个 label属性，当修改一个input之后，去调用changeMoney接口，去刷新界面
changeMoney方法：

这样就可以保证修改某一个

...

			
		

	





	

		

			

				
					
【表格单元格可编辑】vue-elementul简单实现table表格点击单元格可编辑，点击单元格变成输入框修改数据

				
			

			

				

					seeeeeeeeeee的博客
				

				

					02-02
					
					8342
					
				

			

		

		

			
				
这是最近遇到的功能，经常会需要一个表格可以编辑数据类似于excel那种点击一下单元格就可以编辑数据，修改后鼠标移动出去光标消失就会保存数据给后台这里记录一下实现方法，其实也比较简单就是通过角标来判断显示隐藏的。

			
		

	





	

		

			

				
					
使用springboot+mybatis+vue+elementui创建一个搜索功能

				
			

			

				

					06-11
				

			

		

		

			
				
好的，我可以为你解答。以下是一个简单的实现步骤： ...以上就是一个简单的使用 Spring Boot、MyBatis、Vue 和 ElementUI 来创建搜索功能的实现步骤。当然，具体实现方式还需要根据你的具体需求来进行调整。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值