table index & delete array item

https://www.iviewui.com/components/table#ZDYLMB


  2. 编辑 row =
  3.  {
  4.     "keyword": "",
  5.     "value": "",
  6.     "description": "",
  7.     "index": 3,
  8.     "operate": [
  9.         "edit",
  10.         "save",
  11.         "cancel"
  12.     ],
  13.     "isEdit": false,
  14.     "_index": 2,
  15.     "_rowKey": 49
  16. } 3

demo


  2. <!DOCTYPE html>
  3. <html lang="zh-Hans">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <meta name="author" content="xgqfrms">
  9.     <meta name="generator" content="VS code">
  10.     <title>vue & iview</title>
  11.     <!-- libs -->
  12.     <link rel="stylesheet" href="./ivew-3.3.3/iview.css">
  13.     <script src="./ivew-3.3.3/vue-2.6.10/vue.min.js"></script>
  14.     <script src="./ivew-3.3.3/iview.min.js"></script>
  15.     <!-- css -->
  16.     <style lang="css">
  17.         .audit-common-lable{
  18.             width: 120px;
  19.             display: inline-block;
  20.             text-align: left;
  21.             margin: 5px;
  22.         }
  23.         .audit-common-lable-long{
  24.             width: 60px;
  25.             display: inline-block;
  26.             text-align: right;
  27.         }
  28.         .audit-common-lable::after,
  29.         .audit-common-lable-long::after{
  30.             display: inline-block;
  31.             content: ":";
  32.             width: 0;
  33.             border: 1px;
  34.             margin: 2px;
  35.         }
  36.     </style>
  37. </head>
  38. <body>
  39.     <section>
  40.         <div id="app">
  41.             <template>
  42.                 <i-row>
  43.                     <i-col span="24" push="1" style="margin: 5px;">
  44.                         <span class="audit-common-lable-long">请求方式</span>
  45.                         <i-switch
  46.                             style="width: 57px"
  47.                             size="large"
  48.                             @on-change="onSwitchChange"
  49.                             v-model="isGet">
  50.                             <span slot="open">GET</span>
  51.                             <span slot="close">POST</span>
  52.                         </i-switch>
  53.                     </i-col>
  54.                 </i-row>
  55.             </template>
  56.             <template>
  57.                 <i-row>
  58.                     <i-col span="24" push="1" style="margin: 5px;">
  59.                         <span class="audit-common-lable-long">URL</span>
  60.                         <i-input
  61.                             v-model="url"
  62.                             placeholder="请输入 URL"
  63.                             style="width: 300px"
  64.                             prefix="md-link"
  65.                         />
  66.                     </i-col>
  67.                 </i-row>
  68.             </template>
  69.             <template>
  70.                 <i-row>
  71.                     <i-col span="24" push="1" style="margin: 5px;">
  72.                         <span class="audit-common-lable-long">授权方式</span>
  73.                         <i-select
  74.                             aria-placeholder="授权方式"
  75.                             placeholder="请选择授权方式"
  76.                             style="width: 200px"
  77.                             v-model="authorization"
  78.                             @on-change="onChangeSelect(`authorization`)"
  79.                             :filterable="false"
  80.                             :clearable="false">
  81.                             <i-option
  82.                                 v-for="(item, i) in authorizations"
  83.                                 :value="item.value"
  84.                                 :key="i">
  85.                                 {{item.title}}
  86.                             </i-option>
  87.                         </i-select>
  88.                     </i-col>
  89.                 </i-row>
  90.             </template>
  91.             <template>
  92.                 <i-row v-if="authorization==='auth'">
  93.                     <i-col span="24" push="1" style="margin: 5px;">
  94.                         <span class="audit-common-lable-long">Username</span>
  95.                         <i-input
  96.                             v-model="url"
  97.                             placeholder="请输入 Username"
  98.                             style="width: 300px"
  99.                             prefix="md-contact"
  100.                         />
  101.                     </i-col>
  102.                     <i-col span="24" push="1" style="margin: 5px;">
  103.                         <span class="audit-common-lable-long">Password</span>
  104.                         <i-input
  105.                             v-model="url"
  106.                             placeholder="请输入 Password"
  107.                             style="width: 300px"
  108.                             prefix="md-lock"
  109.                         />
  110.                     </i-col>
  111.                 </i-row>
  112.             </template>
  113.             <template>
  114.                 <i-row v-if="authorization==='token'">
  115.                     <i-col span="24" push="1" style="margin: 5px;">
  116.                         <span class="audit-common-lable-long">Token</span>
  117.                         <i-input
  118.                             v-model="url"
  119.                             placeholder="请输入 Token!"
  120.                             style="width: 300px"
  121.                             prefix="md-lock"
  122.                         />
  123.                     </i-col>
  124.                 </i-row>
  125.             </template>
  126.             <template v-if="isGet">
  127.                 <i-row>
  128.                     <i-col span="18" push="1" style="margin: 5px;">
  129.                         <span class="audit-common-lable">GET 参数列表</span>
  130.                         <i-button
  131.                             @click="addGetParams"
  132.                             size="small">
  133.                             + 添加
  134.                         </i-button>
  135.                         <!-- :maxHeight="maxGetHeight" -->
  136.                         <i-table
  137.                             style="margin: 5px; max-height: 300px; overflow-y: auto;"
  138.                             :columns="colsGET"
  139.                             :data="dataGET">
  140.                         </i-table>
  141.                     </i-col>
  142.                 </i-row>
  143.             </template>
  144.             <template v-else>
  145.                 <i-row>
  146.                     <i-col span="23" push="1" style="margin: 5px;">
  147.                         <span class="audit-common-lable">POST 参数方式</span>
  148.                         <i-switch
  149.                             style="width: 57px"
  150.                             size="large"
  151.                             @on-change="onSwitchRadioChange"
  152.                             v-model="isJSON">
  153.                             <span slot="open">form data</span>
  154.                             <span slot="close">JSON</span>
  155.                         </i-switch>
  156.                     </i-col>
  157.                     <i-col span="23" push="1" style="margin: 5px;" v-if="isJSON">
  158.                         <span class="audit-common-lable">参数类型(form data)</span>
  159.                         <i-table
  160.                             style="margin: 5px;"
  161.                             :columns="colsPOST"
  162.                             :data="dataPOST">
  163.                         </i-table>
  164.                     </i-col>
  165.                     <i-col span="6" push="1" style="margin: 5px;" v-else>
  166.                         <span class="audit-common-lable">参数类型(JSON)</span>
  167.                         <i-input
  168.                             style="margin: 5px; width: 500px;"
  169.                             placeholder="请输入 JSON String"
  170.                             v-model="jsonString"
  171.                             :rows="8"
  172.                             type="textarea">
  173.                         </i-input>
  174.                     </i-col>
  175.                 </i-row>
  176.             </template>
  177.             <template>
  178.                 <i-row>
  179.                     <i-col span="24" push="1" style="margin: 5px;"></i-col>
  180.                     <i-col span="2" push="1" style="margin: 5px;">
  181.                         <i-button
  182.                             @click="showSave"
  183.                             size="small"
  184.                             type="warning">
  185.                             保存
  186.                         </i-button>
  187.                     </i-col>
  188.                     <i-col span="2" push="0" style="margin: 5px;">
  189.                         <i-button
  190.                             :disabled="!isSaved"
  191.                             @click="showExecute "
  192.                             size="small"
  193.                             type="primary">
  194.                             执行
  195.                         </i-button>
  196.                     </i-col>
  197.                 </i-row>
  198.                 <Modal
  199.                     v-model="saveModal.visible"
  200.                     title="确定保存">
  201.                     <span></span>
  202.                     <div slot="footer">
  203.                         <i-button
  204.                             type="error"
  205.                             size="large"
  206.                             :loading="saveModal.loading"
  207.                             @click="cancelSave">
  208.                             取消
  209.                         </i-button>
  210.                         <i-button
  211.                             type="success"
  212.                             size="large"
  213.                             :loading="saveModal.loading"
  214.                             @click="resureSave">
  215.                             确定
  216.                         </i-button>
  217.                     </div>
  218.                 </Modal>
  219.                 <Modal
  220.                     v-model="executeModal.visible"
  221.                     @on-ok="resureExecute"
  222.                     @on-cancel="cancelExecute"
  223.                     title="确定执行">
  224.                     <!-- 确定执行 -->
  225.                 </Modal>
  226.             </template>
  227.         </div>
  228.     </section>
  229.     <!-- js -->
  230.     <script>
  231.         let vueApp = new Vue({
  232.             el: "#app",
  233.             data: {
  234.                 saveModal: {
  235.                     visible: false,
  236.                     loading: false,
  237.                 },
  238.                 executeModal: {
  239.                     visible: false,
  240.                     loading: false,
  241.                 },
  242.                 isGet: true,
  243.                 colsGET: [
  244.                     {
  245.                         title: "index",
  246.                         key: "index",
  247.                     },
  248.                     {
  249.                         title: "params.index",
  250.                         key: "index",
  251.                         width: 200,
  252.                         render: (h, params) => {
  253.                             return h("div", [
  254.                                 h("span", params.index),
  255.                             ]);
  256.                         }
  257.                     },
  258.                     {
  259.                         title: "key",
  260.                         key: "keyword",
  261.                         render: (h, params) => {
  262.                             let {
  263.                                 isEdit,
  264.                                 keyword,
  265.                             } = params.row;
  266.                             if (isEdit) {
  267.                                 return h("div", [
  268.                                     h("input", {
  269.                                         attrs: {
  270.                                             value: keyword,
  271.                                             placeholder: "请输入 keyword",
  272.                                         },
  273.                                         on: {
  274.                                             change: (e) => {
  275.                                                 let value = e.target.value;
  276.                                                 // console.log(`e =`, e);
  277.                                                 // console.log(`e.target =`, e.target);
  278.                                                 console.log(`input value =`, value);
  279.                                                 vueApp.updateTempGet(`keyword`, value);
  280.                                             },
  281.                                         }
  282.                                     }, ""),
  283.                                 ]);
  284.                             } else {
  285.                                 return h("div", [
  286.                                     h("span", keyword),
  287.                                 ]);
  288.                             }
  289.                         }
  290.                     },
  291.                     {
  292.                         title: "value",
  293.                         key: "value",
  294.                         render: (h, params) => {
  295.                             let {
  296.                                 isEdit,
  297.                                 value,
  298.                             } = params.row;
  299.                             if (isEdit) {
  300.                                 return h("div", [
  301.                                     h("input", {
  302.                                         attrs: {
  303.                                             value: value,
  304.                                             placeholder: "请输入 value",
  305.                                         },
  306.                                         on: {
  307.                                             change: (e) => {
  308.                                                 let value = e.target.value;
  309.                                                 vueApp.updateTempGet(`value`, value);
  310.                                             },
  311.                                         }
  312.                                     }, ""),
  313.                                 ]);
  314.                             } else {
  315.                                 return h("div", [
  316.                                     h("span", value),
  317.                                 ]);
  318.                             }
  319.                         }
  320.                     },
  321.                     {
  322.                         title: "desc",
  323.                         key: "description",
  324.                         render: (h, params) => {
  325.                             let {
  326.                                 isEdit,
  327.                                 description: desc,
  328.                             } = params.row;
  329.                             if (isEdit) {
  330.                                 return h("div", [
  331.                                     h("input", {
  332.                                         attrs: {
  333.                                             value: desc,
  334.                                             placeholder: "请输入描述信息",
  335.                                         },
  336.                                         on: {
  337.                                             change: (e) => {
  338.                                                 let value = e.target.value;
  339.                                                 vueApp.updateTempGet(`description`, value);
  340.                                             },
  341.                                         }
  342.                                     }, ""),
  343.                                 ]);
  344.                             } else {
  345.                                 return h("div", [
  346.                                     h("span", desc),
  347.                                 ]);
  348.                             }
  349.                         }
  350.                     },
  351.                     {
  352.                         title: "操作",
  353.                         key: "operate",
  354.                         render: (h, params) => {
  355.                             let that = this;
  356.                             let isEdit = params.row.isEdit;
  357.                             let edit = params.row.operate[0];
  358.                             let save = params.row.operate[1];
  359.                             if (isEdit) {
  360.                                 return h("div", [
  361.                                     h("Icon", {
  362.                                         props: {
  363.                                             name: "person"
  364.                                         }
  365.                                     }),
  366.                                     h("a", {
  367.                                         on: {
  368.                                             click: () => {
  369.                                                 vueApp.clickSave(params.index);
  370.                                             },
  371.                                         },
  372.                                     }, save),
  373.                                 ]);
  374.                             } else {
  375.                                 return h("div", [
  376.                                     h("a", {
  377.                                         on: {
  378.                                             click: () => {
  379.                                                 console.log(`编辑 row =\n`, JSON.stringify(params.row, null, 4), params.row.index);
  380.                                                 // that.clickEdit(params.row.index);
  381.                                                 vueApp.clickEdit(params.row.index);
  382.                                                 // that.vueApp.clickEdit(params.row.index);
  383.                                                 // that.vueApp.methods.clickEdit(params.row.index);
  384.                                             },
  385.                                             // click: that.clickEdit(params.row.index),
  386.                                         },
  387.                                     }, edit),
  388.                                     h("a", {
  389.                                         on: {
  390.                                             click: () => {
  391.                                                 vueApp.clickDelete(params.index);
  392.                                                 // vueApp.clickDelete(params.row._index);
  393.                                                 // vueApp.clickDelete(params.row.index);
  394.                                             },
  395.                                         },
  396.                                     }, "删除"),
  397.                                 ]);
  398.                             }
  399.                         },
  400.                     },
  401.                 ],
  402.                 dataGET: [
  403.                     {
  404.                         index: 0,
  405.                         keyword: "a",
  406.                         value: "1",
  407.                         description: "a=1",
  408.                         operate: ["edit", "save", "cancel"],
  409.                         isEdit: false,
  410.                     },
  411.                     {
  412.                         index: 1,
  413.                         keyword: "b",
  414.                         value: "2",
  415.                         description: "b=1",
  416.                         operate: ["edit", "save", "cancel"],
  417.                         isEdit: false,
  418.                     },
  419.                 ],
  420.                 colsPOST: [],
  421.                 dataPOST: [],
  422.                 authorizations: [
  423.                     {
  424.                         title: "No Auth",
  425.                         value: "no",
  426.                     },
  427.                     {
  428.                         title: "Basic Auth",
  429.                         value: "auth",
  430.                     },
  431.                     {
  432.                         title: "Bearer Token",
  433.                         value: "token",
  434.                     },
  435.                 ],
  436.                 url: "",
  437.                 authorization: "no",
  438.                 isJSON: true,
  439.                 postType: "form",
  440.                 jsonString: "",
  441.                 isSaved: false,
  442.                 maxGetHeight: 300,
  443.                 tempGet: {
  444.                     keyword: "",
  445.                     value: "",
  446.                     description: "",
  447.                 },
  448.                 tempGetInit: {
  449.                     keyword: "",
  450.                     value: "",
  451.                     description: "",
  452.                     // index: null,
  453.                     // operate: ["edit", "save"],
  454.                     // isEdit: false,
  455.                 },
  456.             },
  457.             methods: {
  458.                 updateTempGet(type = ``, value = ``) {
  459.                     if(type) {
  460.                         this.tempGet[type] = value;
  461.                     }
  462.                 },
  463.                 addGetParams() {
  464.                     let index = this.dataGET.length;
  465.                     this.dataGET.push({
  466.                         keyword: "",
  467.                         value: "",
  468.                         description: "",
  469.                         index,
  470.                         operate: ["edit", "save", "cancel"],
  471.                         isEdit: false,
  472.                     });
  473.                 },
  474.                 showSave() {
  475.                     this.saveModal.visible = true;
  476.                 },
  477.                 showExecute() {
  478.                     this.executeModal.visible = true;
  479.                 },
  480.                 resureSave() {
  481.                     this.saveModal.visible = false;
  482.                     this.isSaved = true;
  483.                 },
  484.                 cancelSave() {
  485.                     this.saveModal.visible = false;
  486.                     this.isSaved = false;
  487.                 },
  488.                 resureExecute() {
  489.                     this.executeModal.visible = false;
  490.                 },
  491.                 cancelExecute() {
  492.                     this.executeModal.visible = false;
  493.                 },
  494.                 onSwitchChange() {
  495.                     // this.isGet = !this.isGet;
  496.                     console.log(`value =`, this.isGet);
  497.                 },
  498.                 onSwitchRadioChange() {
  499.                     let value = this.isJSON;
  500.                     console.log(`isJSON value =`, value);
  501.                     if (value) {
  502.                         this.postType = "json";
  503.                     } else {
  504.                         this.postType = "form";
  505.                     }
  506.                     console.log(`postType = `, this.postType);
  507.                 },
  508.                 onChangeSelect (type = ``) {
  509.                     let value = this[type];
  510.                     // this.$Message.info(value);
  511.                 },
  512.                 onChangeRadio (type = ``) {
  513.                     let value = this[type];
  514.                     this.$Message.info(value);
  515.                 },
  516.                 onChangeRadioGroup (type = ``) {
  517.                     let value = this[type];
  518.                     this.$Message.info(value);
  519.                 },
  520.                 clickSave(index = ``) {
  521.                     if (index !== ``) {
  522.                         // console.log(`table index =`, index);
  523.                         this.dataGET[index].isEdit = false;
  524.                         // temp
  525.                         let {
  526.                             keyword,
  527.                             value,
  528.                             description,
  529.                         } = this.tempGet;
  530.                         this.dataGET[index] = {
  531.                             keyword,
  532.                             value,
  533.                             description,
  534.                             index: index,
  535.                             operate: ["edit", "save"],
  536.                             isEdit: false,
  537.                         };
  538.                     }
  539.                 },
  540.                 clickEdit(index = ``) {
  541.                     if (index !== ``) {
  542.                         // console.log(`table index =`, index);
  543.                         this.dataGET[index].isEdit = true;
  544.                         let {
  545.                             keyword,
  546.                             value,
  547.                             description,
  548.                         } =  this.dataGET[index];
  549.                         this.tempGet = {
  550.                             keyword,
  551.                             value,
  552.                             description,
  553.                         };
  554.                         console.log(`tempGet =`, JSON.stringify(this.tempGet, null, 4));
  555.                     }
  556.                 },
  557.                 clickDelete(index = ``) {
  558.                     if (index !== ``) {
  559.                         // slice
  560.                         this.dataGET.splice(index, 1);
  561.                         this.tempGet = this.tempGetInit;
  562.                         let newData = this.dataGET || [];
  563.                         // console.log(`newData =`, JSON.stringify(newData, null, 4));
  564.                         this.updateDataGETIndex(newData);
  565.                     }
  566.                 },
  567.                 // id ??? index
  568.                 updateDataGETIndex(data = []) {
  569.                     let result = [];
  570.                     result = data.map((item, i) => {
  571.                         console.log(`item =`, JSON.stringify(item, null, 4));
  572.                         let obj = Object.assign({}, item, {
  573.                             index: i,
  574.                         });
  575.                         console.log(`obj =`, JSON.stringify(obj, null, 4));
  576.                         return obj;
  577.                     });
  578.                     return result;
  579.                 },
  580.             },
  581.             mounted() {
  582.                 //
  583.             },
  584.         });
  585.       </script>
  586. </body>
  587. </html>

table index & delete array item的更多相关文章

  1. Truncate table、Delete与Drop table的区别

    Truncate table.Delete与Drop table的区别 TRUNCATE TABLE 在功能上与不带 WHERE 子句的 DELETE 语句相同:二者均删除表中的全部行.但 TRUNC ...

  2. SQL中truncate table和delete的区别

    truncate table table_name delete from table_name drop table table_name truncate table在功能上与不带where子句的 ...

  3. Can’t delete list item in Sharepoint2013

         Today,I have meet a very strange error.When I attempt to delete a item from a list,I recieve an ...

  4. truncate table 和delete

    delete table 和 truncate table 使用delete语句删除数据的一般语法格式: delete [from] {table_name.view_name} [where< ...

  5. TRUNCATE TABLE 与 DELETE table 区别

    语法 TRUNCATE TABLE name;参数  TRUNCATE TABLE 在功能上与不带 WHERE 子句的 DELETE 语句相同:二者均删除表中的全部行. TRUNCATE TABLE ...

  6. Mysql中truncate table和delete语句的区别

    Mysql中的truncate table和delete语句都可以删除表里面所有数据,但是在一些情况下有些不同! 例子: truncate table gag; (1)truncate table删除 ...

  7. oracle impdp时卡死Processing object type SCHEMA_EXPORT/TABLE/INDEX/INDEX

    今天在用impdp导入时,Processing object type SCHEMA_EXPORT/TABLE/INDEX/INDEX卡在建索引的过程一直不动,也不报错,重试了好几遍还是这样. 后来恍 ...

  8. 小程序重置index，重置item

    重置index,重置item <block wx:for="{{index_data.banner_list}}" wx:for-index="idx" ...

  9. truncate table和delete table 的区别

    truncate table和不带 where 的 detele 功能一样,都是删除表中的所有数据. 但TRUNCATE TABLE 速度更快,占用的日志更少,这是因为 TRUNCATE TABLE ...

随机推荐

  1. P1145 约瑟夫 W（模拟）

    暴力+模拟 #include<iostream> #include<cstring> using namespace std; int ans, k, k2; ]; bool ...

  2. Mqtt用户认证

    http://emqtt.com/docs/v2/guide.html 1默认是匿名认证,不用输入用户名和密码,直接可连接 2如何开启用户名和密码认证模式 2-1关闭匿名认证 在你的MQTT安装目录下 ...

  3. js Ajax 请求返回

    1.后台正常返回值 2.后台异常返回值 一 后台正常返回值 二.后台异常返回 场景1:报错 场景2:登录超时,这种场景,需要考虑

  4. A2D JS框架 - loadScript实现

    其实这个功能比较小,本着自己造轮子的优良传统....就自己造一个好了 <head> <title></title> <script src="A2D ...

  5. [C#] LINQ之Join与GroupJoin

    声明:本文为www.cnc6.cn原创,转载时请注明出处,谢谢! 一.编写Person与City类,如下: class Person { public int CityID { set; get; } ...

  6. Windows Community Toolkit 3.0 - Gaze Interaction

    概述 Gaze Input & Tracking - 也就是视觉输入和跟踪,是一种和鼠标/触摸屏输入非常不一样的交互方式,利用人类眼球的识别和眼球方向角度的跟踪,来判断人眼的目标和意图,从而非 ...

  7. 不容错过的超赞项目管理PPT

    不容错过的超赞项目管理PPT(转载) 大公司的一个好处,是各个领域都有牛人,可以为你提供经验分享交流.腾讯庞大的培训体系更是保证了:如果你想学点什么东西,你总可以学到.腾讯内部资源30页PPT曝光 — ...

  8. 【评分】Alpha 事后诸葛亮（团队）

    [评分]Alpha 事后诸葛亮(团队) 总结 按时交 - 有分 晚交 - 0分 迟交一周以上 - 倒扣本次作业分数 抄袭 - 倒扣本次作业分数 本次作业都是以问答形式进行,大部分同学在回答问题方面都一 ...

  9. Graph Without Long Directed Paths CodeForces - 1144F （dfs染色）

    You are given a connected undirected graph consisting of nn vertices and mm edges. There are no self ...

  10. CentOS 7.2 yum安装LAMP环境

    https://www.linuxidc.com/Linux/2016-11/136766.htm 详见以上链接,用yum安装方便省事. 尤其注意,mysql数据要设置远程连接.