table index & delete array item
table index & delete array item
https://www.iviewui.com/components/table#ZDYLMB
编辑 row =
{
"keyword": "",
"value": "",
"description": "",
"index": 3,
"operate": [
"edit",
"save",
"cancel"
],
"isEdit": false,
"_index": 2,
"_rowKey": 49
} 3
demo
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="xgqfrms">
<meta name="generator" content="VS code">
<title>vue & iview</title>
<!-- libs -->
<link rel="stylesheet" href="./ivew-3.3.3/iview.css">
<script src="./ivew-3.3.3/vue-2.6.10/vue.min.js"></script>
<script src="./ivew-3.3.3/iview.min.js"></script>
<!-- css -->
<style lang="css">
.audit-common-lable{
width: 120px;
display: inline-block;
text-align: left;
margin: 5px;
}
.audit-common-lable-long{
width: 60px;
display: inline-block;
text-align: right;
}
.audit-common-lable::after,
.audit-common-lable-long::after{
display: inline-block;
content: ":";
width: 0;
border: 1px;
margin: 2px;
}
</style>
</head>
<body>
<section>
<div id="app">
<template>
<i-row>
<i-col span="24" push="1" style="margin: 5px;">
<span class="audit-common-lable-long">请求方式</span>
<i-switch
style="width: 57px"
size="large"
@on-change="onSwitchChange"
v-model="isGet">
<span slot="open">GET</span>
<span slot="close">POST</span>
</i-switch>
</i-col>
</i-row>
</template>
<template>
<i-row>
<i-col span="24" push="1" style="margin: 5px;">
<span class="audit-common-lable-long">URL</span>
<i-input
v-model="url"
placeholder="请输入 URL"
style="width: 300px"
prefix="md-link"
/>
</i-col>
</i-row>
</template>
<template>
<i-row>
<i-col span="24" push="1" style="margin: 5px;">
<span class="audit-common-lable-long">授权方式</span>
<i-select
aria-placeholder="授权方式"
placeholder="请选择授权方式"
style="width: 200px"
v-model="authorization"
@on-change="onChangeSelect(`authorization`)"
:filterable="false"
:clearable="false">
<i-option
v-for="(item, i) in authorizations"
:value="item.value"
:key="i">
{{item.title}}
</i-option>
</i-select>
</i-col>
</i-row>
</template>
<template>
<i-row v-if="authorization==='auth'">
<i-col span="24" push="1" style="margin: 5px;">
<span class="audit-common-lable-long">Username</span>
<i-input
v-model="url"
placeholder="请输入 Username"
style="width: 300px"
prefix="md-contact"
/>
</i-col>
<i-col span="24" push="1" style="margin: 5px;">
<span class="audit-common-lable-long">Password</span>
<i-input
v-model="url"
placeholder="请输入 Password"
style="width: 300px"
prefix="md-lock"
/>
</i-col>
</i-row>
</template>
<template>
<i-row v-if="authorization==='token'">
<i-col span="24" push="1" style="margin: 5px;">
<span class="audit-common-lable-long">Token</span>
<i-input
v-model="url"
placeholder="请输入 Token!"
style="width: 300px"
prefix="md-lock"
/>
</i-col>
</i-row>
</template>
<template v-if="isGet">
<i-row>
<i-col span="18" push="1" style="margin: 5px;">
<span class="audit-common-lable">GET 参数列表</span>
<i-button
@click="addGetParams"
size="small">
+ 添加
</i-button>
<!-- :maxHeight="maxGetHeight" -->
<i-table
style="margin: 5px; max-height: 300px; overflow-y: auto;"
:columns="colsGET"
:data="dataGET">
</i-table>
</i-col>
</i-row>
</template>
<template v-else>
<i-row>
<i-col span="23" push="1" style="margin: 5px;">
<span class="audit-common-lable">POST 参数方式</span>
<i-switch
style="width: 57px"
size="large"
@on-change="onSwitchRadioChange"
v-model="isJSON">
<span slot="open">form data</span>
<span slot="close">JSON</span>
</i-switch>
</i-col>
<i-col span="23" push="1" style="margin: 5px;" v-if="isJSON">
<span class="audit-common-lable">参数类型(form data)</span>
<i-table
style="margin: 5px;"
:columns="colsPOST"
:data="dataPOST">
</i-table>
</i-col>
<i-col span="6" push="1" style="margin: 5px;" v-else>
<span class="audit-common-lable">参数类型(JSON)</span>
<i-input
style="margin: 5px; width: 500px;"
placeholder="请输入 JSON String"
v-model="jsonString"
:rows="8"
type="textarea">
</i-input>
</i-col>
</i-row>
</template>
<template>
<i-row>
<i-col span="24" push="1" style="margin: 5px;"></i-col>
<i-col span="2" push="1" style="margin: 5px;">
<i-button
@click="showSave"
size="small"
type="warning">
保存
</i-button>
</i-col>
<i-col span="2" push="0" style="margin: 5px;">
<i-button
:disabled="!isSaved"
@click="showExecute "
size="small"
type="primary">
执行
</i-button>
</i-col>
</i-row>
<Modal
v-model="saveModal.visible"
title="确定保存">
<span></span>
<div slot="footer">
<i-button
type="error"
size="large"
:loading="saveModal.loading"
@click="cancelSave">
取消
</i-button>
<i-button
type="success"
size="large"
:loading="saveModal.loading"
@click="resureSave">
确定
</i-button>
</div>
</Modal>
<Modal
v-model="executeModal.visible"
@on-ok="resureExecute"
@on-cancel="cancelExecute"
title="确定执行">
<!-- 确定执行 -->
</Modal>
</template>
</div>
</section>
<!-- js -->
<script>
let vueApp = new Vue({
el: "#app",
data: {
saveModal: {
visible: false,
loading: false,
},
executeModal: {
visible: false,
loading: false,
},
isGet: true,
colsGET: [
{
title: "index",
key: "index",
},
{
title: "params.index",
key: "index",
width: 200,
render: (h, params) => {
return h("div", [
h("span", params.index),
]);
}
},
{
title: "key",
key: "keyword",
render: (h, params) => {
let {
isEdit,
keyword,
} = params.row;
if (isEdit) {
return h("div", [
h("input", {
attrs: {
value: keyword,
placeholder: "请输入 keyword",
},
on: {
change: (e) => {
let value = e.target.value;
// console.log(`e =`, e);
// console.log(`e.target =`, e.target);
console.log(`input value =`, value);
vueApp.updateTempGet(`keyword`, value);
},
}
}, ""),
]);
} else {
return h("div", [
h("span", keyword),
]);
}
}
},
{
title: "value",
key: "value",
render: (h, params) => {
let {
isEdit,
value,
} = params.row;
if (isEdit) {
return h("div", [
h("input", {
attrs: {
value: value,
placeholder: "请输入 value",
},
on: {
change: (e) => {
let value = e.target.value;
vueApp.updateTempGet(`value`, value);
},
}
}, ""),
]);
} else {
return h("div", [
h("span", value),
]);
}
}
},
{
title: "desc",
key: "description",
render: (h, params) => {
let {
isEdit,
description: desc,
} = params.row;
if (isEdit) {
return h("div", [
h("input", {
attrs: {
value: desc,
placeholder: "请输入描述信息",
},
on: {
change: (e) => {
let value = e.target.value;
vueApp.updateTempGet(`description`, value);
},
}
}, ""),
]);
} else {
return h("div", [
h("span", desc),
]);
}
}
},
{
title: "操作",
key: "operate",
render: (h, params) => {
let that = this;
let isEdit = params.row.isEdit;
let edit = params.row.operate[0];
let save = params.row.operate[1];
if (isEdit) {
return h("div", [
h("Icon", {
props: {
name: "person"
}
}),
h("a", {
on: {
click: () => {
vueApp.clickSave(params.index);
},
},
}, save),
]);
} else {
return h("div", [
h("a", {
on: {
click: () => {
console.log(`编辑 row =\n`, JSON.stringify(params.row, null, 4), params.row.index);
// that.clickEdit(params.row.index);
vueApp.clickEdit(params.row.index);
// that.vueApp.clickEdit(params.row.index);
// that.vueApp.methods.clickEdit(params.row.index);
},
// click: that.clickEdit(params.row.index),
},
}, edit),
h("a", {
on: {
click: () => {
vueApp.clickDelete(params.index);
// vueApp.clickDelete(params.row._index);
// vueApp.clickDelete(params.row.index);
},
},
}, "删除"),
]);
}
},
},
],
dataGET: [
{
index: 0,
keyword: "a",
value: "1",
description: "a=1",
operate: ["edit", "save", "cancel"],
isEdit: false,
},
{
index: 1,
keyword: "b",
value: "2",
description: "b=1",
operate: ["edit", "save", "cancel"],
isEdit: false,
},
],
colsPOST: [],
dataPOST: [],
authorizations: [
{
title: "No Auth",
value: "no",
},
{
title: "Basic Auth",
value: "auth",
},
{
title: "Bearer Token",
value: "token",
},
],
url: "",
authorization: "no",
isJSON: true,
postType: "form",
jsonString: "",
isSaved: false,
maxGetHeight: 300,
tempGet: {
keyword: "",
value: "",
description: "",
},
tempGetInit: {
keyword: "",
value: "",
description: "",
// index: null,
// operate: ["edit", "save"],
// isEdit: false,
},
},
methods: {
updateTempGet(type = ``, value = ``) {
if(type) {
this.tempGet[type] = value;
}
},
addGetParams() {
let index = this.dataGET.length;
this.dataGET.push({
keyword: "",
value: "",
description: "",
index,
operate: ["edit", "save", "cancel"],
isEdit: false,
});
},
showSave() {
this.saveModal.visible = true;
},
showExecute() {
this.executeModal.visible = true;
},
resureSave() {
this.saveModal.visible = false;
this.isSaved = true;
},
cancelSave() {
this.saveModal.visible = false;
this.isSaved = false;
},
resureExecute() {
this.executeModal.visible = false;
},
cancelExecute() {
this.executeModal.visible = false;
},
onSwitchChange() {
// this.isGet = !this.isGet;
console.log(`value =`, this.isGet);
},
onSwitchRadioChange() {
let value = this.isJSON;
console.log(`isJSON value =`, value);
if (value) {
this.postType = "json";
} else {
this.postType = "form";
}
console.log(`postType = `, this.postType);
},
onChangeSelect (type = ``) {
let value = this[type];
// this.$Message.info(value);
},
onChangeRadio (type = ``) {
let value = this[type];
this.$Message.info(value);
},
onChangeRadioGroup (type = ``) {
let value = this[type];
this.$Message.info(value);
},
clickSave(index = ``) {
if (index !== ``) {
// console.log(`table index =`, index);
this.dataGET[index].isEdit = false;
// temp
let {
keyword,
value,
description,
} = this.tempGet;
this.dataGET[index] = {
keyword,
value,
description,
index: index,
operate: ["edit", "save"],
isEdit: false,
};
}
},
clickEdit(index = ``) {
if (index !== ``) {
// console.log(`table index =`, index);
this.dataGET[index].isEdit = true;
let {
keyword,
value,
description,
} = this.dataGET[index];
this.tempGet = {
keyword,
value,
description,
};
console.log(`tempGet =`, JSON.stringify(this.tempGet, null, 4));
}
},
clickDelete(index = ``) {
if (index !== ``) {
// slice
this.dataGET.splice(index, 1);
this.tempGet = this.tempGetInit;
let newData = this.dataGET || [];
// console.log(`newData =`, JSON.stringify(newData, null, 4));
this.updateDataGETIndex(newData);
}
},
// id ??? index
updateDataGETIndex(data = []) {
let result = [];
result = data.map((item, i) => {
console.log(`item =`, JSON.stringify(item, null, 4));
let obj = Object.assign({}, item, {
index: i,
});
console.log(`obj =`, JSON.stringify(obj, null, 4));
return obj;
});
return result;
},
},
mounted() {
//
},
});
</script>
</body>
</html>
table index & delete array item的更多相关文章
- Truncate table、Delete与Drop table的区别
Truncate table.Delete与Drop table的区别 TRUNCATE TABLE 在功能上与不带 WHERE 子句的 DELETE 语句相同:二者均删除表中的全部行.但 TRUNC ...
- SQL中truncate table和delete的区别
truncate table table_name delete from table_name drop table table_name truncate table在功能上与不带where子句的 ...
- 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 ...
- truncate table 和delete
delete table 和 truncate table 使用delete语句删除数据的一般语法格式: delete [from] {table_name.view_name} [where< ...
- TRUNCATE TABLE 与 DELETE table 区别
语法 TRUNCATE TABLE name;参数 TRUNCATE TABLE 在功能上与不带 WHERE 子句的 DELETE 语句相同:二者均删除表中的全部行. TRUNCATE TABLE ...
- Mysql中truncate table和delete语句的区别
Mysql中的truncate table和delete语句都可以删除表里面所有数据,但是在一些情况下有些不同! 例子: truncate table gag; (1)truncate table删除 ...
- oracle impdp时卡死Processing object type SCHEMA_EXPORT/TABLE/INDEX/INDEX
今天在用impdp导入时,Processing object type SCHEMA_EXPORT/TABLE/INDEX/INDEX卡在建索引的过程一直不动,也不报错,重试了好几遍还是这样. 后来恍 ...
- 小程序重置index，重置item
重置index,重置item <block wx:for="{{index_data.banner_list}}" wx:for-index="idx" ...
- truncate table和delete table 的区别
truncate table和不带 where 的 detele 功能一样,都是删除表中的所有数据. 但TRUNCATE TABLE 速度更快,占用的日志更少,这是因为 TRUNCATE TABLE ...
随机推荐
- PHP消息队列的实现方式与详解，值得一看
队列原理: 也是解耦的原理:业务系统和队列处理系统没有关系 一个写(业务系统),一个读(队列管理系统). 写的只管往队列里写,别的不用操心,读的能不能读完和写的也没有关系 同样,读的只管从队列里往外读 ...
- 路飞学城-Python开发集训-第5章
面向过程:核心是过程二字,过程是解决问题的步骤,相当于设计一条流水线,是机械式的思维方式 优点:复杂的问题流程化,进而简单化 缺点:可扩展性差 面向对象:核心是对象二字,对象就是特征与技能的结合体. ...
- Python分析微信好友性别比例和省份城市分布比例
如需转发请注明:小婷儿的博客:https://www.cnblogs.com/xxtalhr/p/10642241.html 一.安装模块 pip install itchat pip install ...
- LOJ6036 编码 2-SAT、Trie
传送门 每个串只有一个?,?还只能填0或者1,不难想到2-SAT求解. 一个很暴力的想法是枚举?填0或者1,然后对所有可能的前缀连边.这样边数是\(O(n^2)\)的,需要优化. 看到前缀不难想到Tr ...
- 实时监控input输入值变化
在web开发中,我们有时会需要动态监听输入框值的变化,当使用onkeydown.onkeypress.onkeyup作为监听事件时,会发现一些复制粘贴等操作用不了,同时,在处理组合快键键的时候也很麻烦 ...
- 调整代码生成工具Database2Sharp的Winform界面生成，使其易于列表工具栏的使用。
在Winform界面开发的时候,有时候我们客户喜欢把功能放在列表界面的顶部,这样界面和功能整齐放置,也是一种比较美观的方式,基于这种方式的考虑,改造了代码生成工具的Winform界面生成规则,把增删改 ...
- Jmeter(三十五)_分布式
jmeter分布式简单步骤说明: 1:添加远程服务器IP到配置文件 在JMETER_HOME / bin / jmeter.properties中,找到名为“ remote_hosts ” 的属性,并 ...
- Centos7 下SVN迁移
SVN迁移需要做如下操作: 1. 将原来的Repository导出 . #svnadmin dump 原有repos的目录路径 > dumpfile (不同服务器安装目录不同,根据具体情况调整) ...
- Python编码与变量
(一)Python执行的方式 Window: 在CMD里面,使用 Python + 相对路径/绝对路径 在解释器里面,直接输入,一行代码一行代码的解释 Linux: 明确地指出用Python解释器来执 ...
- iOS NSDictionary JSON 相互转换
/*! * @brief 把格式化的JSON格式的字符串转换成字典 * @param jsonString JSON格式的字符串 * @return 返回字典 */ + (NSDictionary * ...