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

一、需求,看下图:

vue+elementui通过一个输入框的值改变table的值_第1张图片

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

vue+elementui通过一个输入框的值改变table的值_第2张图片

二、查询题库返回的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的代码全贴出来,记录一下踩的坑:





四、实现思路:

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

1、定义mutipleSelection、assessList两个数组

 
  

2、遍历assessList:

vue+elementui通过一个输入框的值改变table的值_第3张图片

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

你可能感兴趣的:(Java,vue,java)