Vue el-table实现行内编辑

31 篇文章 3 订阅

在这里插入图片描述
当前的需求是实现el-table 的行内编辑,有新增、编辑、删除的功能。第一行只可以新增数据。其他行点击编辑时,text变成编辑框,点击apply就是确认编辑

以下是el-table的代码:

<el-table
  border
  :data="tableData"
>
  <el-table-column prop="name" label="Name" align="center">
    <template slot-scope="scope">
      <el-input
        v-if="scope.$index === 0"
        v-model="scope.row.name"
        maxlength="30"
        placeholder="Required"
      />
      <span v-else v-text="scope.row.name"></span>
    </template>
  </el-table-column>
  <el-table-column prop="inIp" label="Internal IP" align="center">
    <template slot-scope="scope">
      <el-select
        v-if="scope.row.isEdit"
        v-model="scope.row.inIp"
        placeholder="Required"
      >
        <el-option
          v-for="(item,index) in internalIpList"
          :key="index"
          :label="item"
          :value="item"
        />
      </el-select>
      <span v-else v-text="scope.row.inIp"></span>
    </template>
  </el-table-column>
  <el-table-column prop="inPort" label="Internal Port" align="center">
    <template slot-scope="scope">
      <el-input
        v-if="scope.row.isEdit"
        v-model="scope.row.inPort"
        maxlength="20"
        placeholder="Required"
      />
      <span v-else v-text="scope.row.inPort"></span>
    </template>
  </el-table-column>
  <el-table-column prop="outPort" label="External Port" align="center">
    <template slot-scope="scope">
      <el-input
        v-if="scope.row.isEdit"
        v-model="scope.row.outPort"
        maxlength="20"
        placeholder="Required"
      />
      <span v-else v-text="scope.row.outPort"></span>
    </template>
  </el-table-column>
  <el-table-column prop="enabled" label="Status" align="center">
    <template slot-scope="scope">
      <el-select v-if="scope.row.isEdit" v-model="scope.row.enabled">
        <el-option label="Enabled" :value="1"/>
        <el-option label="Disabled" :value="0"/>
      </el-select>
      <span v-else v-text="scope.row.enabled === 1 ? 'Enabled' : 'Disabled'"></span>
    </template>
  </el-table-column>
  <el-table-column label="Operation" align="center" class-name="small-padding fixed-width">
    <template slot-scope="scope">
      <el-button
        v-if="scope.$index === 0"
        size="mini"
        type="text"
        style="color: #2090c1"
        @click="handleAdd(scope.row)"
      >Add
      </el-button>
      <el-button
        v-if="scope.$index !== 0"
        size="mini"
        type="text"
        style="color: #2090c1"
        @click="handleUpdate(scope.row)"
      >{{ scope.row.isEdit ? 'Apply' : 'Edit' }}
      </el-button>
      <el-button
        v-if="scope.$index !== 0"
        size="mini"
        type="text"
        style="color: #F56C6C"
        @click="handleDelete(scope.row)"
      >{{ scope.row.isEdit ? 'Cancel' : 'Delete' }}
      </el-button>
    </template>
  </el-table-column>
</el-table>

主要是根据每行的isEdit来判断是编辑框还是文本

export default {
	data() {
	    return {
	    	tableData: [],
     		internalIpList: []
	    }
	},
	methods: {
		// 获取列表
		getReverseShellList() {
	      getShellList().then(res => {
	        if (res.code === 200) {
	          if (res.data && res.data.length > 0) {
	          	// 获取到的数据加上 isEdit是false, 默认是文本
	            res.data.forEach(item => {
	              item['isEdit'] = false
	            })
	          }
	          this.tableData = res.data
	          // 在表格列表前插入一行,用来新增数据
	          this.tableData.unshift({
	            name: '',
	            inIp: '',
	            inPort: null,
	            outPort: null,
	            enabled: null,
	            isEdit: true
	          })
	        }
	      })
	    },
	    // 新增按钮
	    handleAdd(row) {
	      for (let key in row) {
	      	// 判断一行字段是否输入完整
	        if (row[key] === '' || row[key] === null || typeof row[key] === 'undefined') {
	          this.msgError('Please complete the information')
	          return
	        }
	      }
	      const params = {
	        name: row.name,
	        inIp: row.inIp,
	        inPort: parseInt(row.inPort),
	        outPort: parseInt(row.outPort),
	        enabled: row.enabled
	      }
	      addShell(params).then(res => {
	        if (res.code === 200) {
	          this.msgSuccess('Add reverse shell successfully')
	          row.isEdit = false
	          this.getReverseShellList()
	        }
	      })
	    },
	    // 编辑或者Apply按钮
	    handleUpdate(row) {
	      // 点击Apply时
	      if (row.isEdit) {
	        for (let key in row) {
	          if (row[key] === '' || row[key] === null || typeof row[key] === 'undefined') {
	            this.msgError('Please complete the information')
	            return
	          }
	        }
	        const params = {
	          name: row.name,
	          inIp: row.inIp,
	          inPort: parseInt(row.inPort),
	          outPort: parseInt(row.outPort),
	          enabled: row.enabled
	        }
	        updateShell(params).then(res => {
	          if (res.code === 200) {
	            this.msgSuccess('Update reverse shell successfully')
	            this.getReverseShellList()
	          }
	        })
	      } else {
	      	// 点击编辑时
	        row.isEdit = true
	      }
	    },
	    // 删除或取消按钮
	    handleDelete(row) {
	      // 点击取消时
	      if (row.isEdit) {
	        this.getReverseShellList()
	      } else {
	      	// 点击删除时
	        this.$confirm('Are you sure to delete reverse shell?', 'warning', {
	          confirmButtonText: 'Sure',
	          cancelButtonText: 'Cancel',
	          type: 'warning'
	        }).then(() => {
	          deleteShell(row.name).then(res => {
	            if (res.code === 200) {
	              this.msgSuccess('Delete reverse shell successfully')
	              this.getReverseShellList()
	            }
	          })
	        }).catch(() => {
	        })
	      }
	    },
	}
}
  • 4
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
\contentsline {chapter}{Contents}{2}{section*.1} {1}Java基础}{17}{chapter.1} {1.1}基本语法}{17}{section.1.1} {1.2}数字表达方式}{17}{section.1.2} {1.3}补码}{19}{section.1.3} {1.3.1}总结}{23}{subsection.1.3.1} {1.4}数据类型}{23}{section.1.4} {1.4.1}整数与浮点数}{23}{subsection.1.4.1} {1.4.1.1}浮点数原理}{24}{subsubsection.1.4.1.1} {1.4.2}格式化输出浮点数}{24}{subsection.1.4.2} {1.4.3}\texttt {char}}{24}{subsection.1.4.3} {1.4.4}转义字符}{25}{subsection.1.4.4} {1.4.5}Boolean 布尔值}{25}{subsection.1.4.5} {1.5}基本类型变量的初始值}{26}{section.1.5} {1.6}数据类型转换}{26}{section.1.6} {1.7}方法}{26}{section.1.7} {1.8}运算符}{27}{section.1.8} {1.8.1}自增运算}{28}{subsection.1.8.1} {1.8.1.1}Postincrement}{28}{subsubsection.1.8.1.1} {1.8.1.2}Preincrement}{28}{subsubsection.1.8.1.2} {1.8.1.3}复合赋值运算}{28}{subsubsection.1.8.1.3} {1.8.2}逻辑运算}{29}{subsection.1.8.2} {1.8.3}条件运算符}{29}{subsection.1.8.3} {1.8.4}移位运算符}{30}{subsection.1.8.4} {1.9}流程控制}{31}{section.1.9} {1.9.1}\texttt {if\ldots esle\ldots }}{31}{subsection.1.9.1} {1.9.2}\texttt {switch}}{31}{subsection.1.9.2} {1.9.3}\texttt {while}}{32}{subsection.1.9.3} {1.9.4}\texttt {for}}{32}{subsection.1.9.4} {1.9.5}foreach}{32}{subsection.1.9.5} {1.9.6}go-to}{33}{subsection.1.9.6} {1.9.7}\texttt {do-while}}{33}{subsection.1.9.7} {1.10}数组(array)}{34}{section.1.10} {1.10.1}数组变量的声明}{34}{subsection.1.10.1} {1.10.2}数组变量的初始化}{34}{subsection.1.10.2} {1.10.3}数组对象的引用}{35}{subsection.1.10.3} {1.10.4}数组对象的复制}{35}{subsection.1.10.4} {1.10.5}扩充数组对象长度}{36}{subsection.1.10.5} {1.10.6}Problems}{37}{subsection.1.10.6} {1.11}简单算法}{38}{section.1.11} {1.11.1}打乱算法}{38}{subsection.1.11.1} {1.11.2}排序算法}{38}{subsection.1.11.2} {1.11.2.1}选择排序}{38}{subsubsection.1.11.2.1} {1.11.2.2}冒泡排序}{39}{subsubsection.1.11.2.2} {1.11.2.3}插入排序}{40}{subsubsection.1.11.2.3} {1.11.3}递归调用}{41}{subsection.1.11.3} {1.12}Java API}{41}{section.1.12} {1.13}Linux命令}{41}{section.1.13} {1.13.1}基本查看、移动}{41}{subsection.1.13.1} {1.13.2}权限}{42}{subsection.1.13.2} {1.13.3}打包备份与恢复}{42}{subsection.1.13.3} {1.13.3.1}\texttt {tar},\texttt {gzip}}{42}{subsubsection.1.13.3.1} {1.13.3.2}\texttt {zip}}{42}{subsubsection.1.13.3.2} {1.13.3.3}文本创建与编辑}{43}{subsubsection.1.13.3.3} {1.14}\texttt {PATH}}{43}{section.1.14} {1.14.1}Java的打包命令}{44}{subsection.1.14.1} {2}Everything is an Object }{45}{chapter.2} {2.1}类与对象}{45}{section.2.1} {2.1.1}构造方法}{45}{subsection.2.1.1} {2.1.2}Java变量类型}{47}{subsection.2.1.2} {2.1.3}面向对象的编程}{47}{subsection.2.1.3} {2.2}继承}{48}{section.2.2} {2.2.1}super(), this()}{49}{subsection.2.2.1} {2.2.2}方法重写/覆盖}{50}{subsection.2.2.2} {2.3}修饰符}{51}{section.2.3} {2.4}父类对象的方法调用}{51}{section.2.4} {2.5}封装}{52}{section.2.5} {2.6}多态}{53}{section.2.6} {2.7}Sample code}{54}{section.2.7} {2.8}框架中移动的小球}{59}{section.2.8} {2.9}抽象与接口}{59}{section.2.9} {2.10}访问控制}{60}{section.2.10} {2.10.1}类的属性}{60}{subsection.2.10.1} {2.10.2}类的方法}{61}{subsection.2.10.2} {2.10.3}静态代码块}{62}{subsection.2.10.3} {2.11}\ttfamily final}{63}{section.2.11} {2.12}\ttfamily abstract}{63}{section.2.12} {2.13}\ttfamily interface}{64}{section.2.13} {2.14}JavaBean规范}{66}{section.2.14} {3}常用类}{67}{chapter.3} {3.1}Object类}{67}{section.3.1} {3.1.1}\ttfamily toString}{67}{subsection.3.1.1} {3.1.2}\ttfamily equals}{67}{subsection.3.1.2} {3.1.3}\ttfamily hashCode}{68}{subsection.3.1.3} {3.2}String类}{69}{section.3.2} {3.3}String常量重利用}{70}{section.3.3} {3.4}正则表达式}{71}{section.3.4} {3.5}StringBuffer}{75}{section.3.5} {3.6}StringBuilder}{76}{section.3.6} {3.7}StringBuilder与StringBuffer的缺点}{76}{section.3.7} {3.8}内部类}{77}{section.3.8} {4}Collection}{80}{chapter.4} {4.1}\ttfamily java.util.ArrayList}{80}{section.4.1} {4.2}\ttfamily java.util.LinkedList}{81}{section.4.2} {4.3}贪吃蛇案例}{82}{section.4.3} {4.4}散列表与HashMap}{83}{section.4.4} {4.4.1}java.util.HashMap}{83}{subsection.4.4.1} {4.5}\ttfamily java.util.HashSet}{84}{section.4.5} {4.6}泛型}{84}{section.4.6} {4.7}集合的迭代(Iterator)}{85}{section.4.7} {4.8}Collections集合工具类}{86}{section.4.8} {4.9}Comparable与Comparator}{86}{section.4.9} {4.9.1}Comparable}{86}{subsection.4.9.1} {4.9.2}Comparator}{87}{subsection.4.9.2} {4.10}包装类}{87}{section.4.10} {4.11}集合的复制}{88}{section.4.11} {4.12}集合的同步化}{89}{section.4.12} {4.13}集合转换为数组}{89}{section.4.13} {4.14}数组转换为集合}{89}{section.4.14} {4.15}Map的迭代}{90}{section.4.15} {4.15.1}字符统计}{91}{subsection.4.15.1} {5}格式化输入输出}{94}{chapter.5} {5.1}时间与日期}{94}{section.5.1} {5.1.1}各类时间日期转换}{94}{subsection.5.1.1} {5.1.2}时间的输入与输出}{97}{subsection.5.1.2} {5.2}数字的输入输出}{97}{section.5.2} {5.2.1}将浮点数四舍五入到指定精度}{98}{subsection.5.2.1} {6}Exception}{99}{chapter.6} {6.1}\ttfamily try-catch}{99}{section.6.1} {6.2}\ttfamily finally}{100}{section.6.2} {6.3}\ttfamily throws}{101}{section.6.3} {7}IO}{103}{chapter.7} {7.1}Java的文件系统管理}{103}{section.7.1} {7.2}回调模式与FileFilter}{104}{section.7.2} {7.3}\ttfamily RandomAccessFile}{106}{section.7.3} {7.4}基本类型数据序列化}{108}{section.7.4} {7.5}String的序列化}{109}{section.7.5} {7.6}InputStream与OutputStream}{109}{section.7.6} {7.6.1}FileInputStream}{109}{subsection.7.6.1} {7.6.2}FileOutputStream}{110}{subsection.7.6.2} {7.7}流}{110}{section.7.7} {7.8}Buffer}{112}{section.7.8} {7.9}字符流}{112}{section.7.9} {7.10}缓冲字符输入输出流}{113}{section.7.10} {7.11}文件常用操作}{114}{section.7.11} {7.12}对象序列化}{117}{section.7.12} {8}多线程}{121}{chapter.8} {8.1}线程的常用属性与方法}{121}{section.8.1} {8.2}后台线程}{123}{section.8.2} {8.3}创建线程的两种方法}{123}{section.8.3} {8.4}Runnable}{123}{section.8.4} {8.5}Sleep阻塞与打断唤醒}{124}{section.8.5} {8.5.1}sleep与wait的差异}{124}{subsection.8.5.1} {8.6}IO阻塞}{126}{section.8.6} {8.7}同步与异步}{126}{section.8.7} {8.8}Timer}{133}{section.8.8} {9}Java网络编程}{135}{chapter.9} {10}反射}{141}{chapter.10} {10.1}Class}{141}{section.10.1} {10.1.1}Field}{145}{subsection.10.1.1} {10.1.2}Method}{145}{subsection.10.1.2} {10.1.3}Constructor}{145}{subsection.10.1.3} {10.2}其他Java相关}{146}{section.10.2} {11}项目}{148}{chapter.11} {11.1}ELTS}{148}{section.11.1} {12}Oracle数据库}{151}{chapter.12} {12.1}术语}{151}{section.12.1} {12.2}登录数据库}{151}{section.12.2} {12.3}创建表格}{152}{section.12.3} {12.4}关于null值}{154}{section.12.4} {12.5}操作符与实例}{154}{section.12.5} {12.5.1}where}{154}{subsection.12.5.1} {12.6}函数}{156}{section.12.6} {12.7}组函数}{158}{section.12.7} {12.7.1}group by}{159}{subsection.12.7.1} {12.7.2}having}{160}{subsection.12.7.2} {12.8}子查询}{161}{section.12.8} {12.9} 授权与回收权限}{161}{section.12.9} {12.10}示例}{162}{section.12.10} {12.10.1}exists}{165}{subsection.12.10.1} {12.11}集合操作}{165}{section.12.11} {12.11.1}union}{166}{subsection.12.11.1} {12.11.2}intersect与minus}{166}{subsection.12.11.2} {12.11.3}join}{166}{subsection.12.11.3} {12.11.3.1}cross join}{166}{subsubsection.12.11.3.1} {12.11.3.2}inner join}{167}{subsubsection.12.11.3.2} {12.11.3.3}outer join}{170}{subsubsection.12.11.3.3} {12.11.3.4}full join}{172}{subsubsection.12.11.3.4} {12.12}inner join与outer join比较}{172}{section.12.12} {12.12.1}非等值连接}{174}{subsection.12.12.1} {12.13}DML语句}{175}{section.12.13} {12.13.1}insert}{175}{subsection.12.13.1} {12.13.2}create}{175}{subsection.12.13.2} {12.13.3}rownum}{175}{subsection.12.13.3} {12.13.4}update}{176}{subsection.12.13.4} {12.13.5}delete}{177}{subsection.12.13.5} {12.13.6}drop}{177}{subsection.12.13.6} {12.13.7}rename}{177}{subsection.12.13.7} {12.14}SQL脚本}{177}{section.12.14} {12.15}Transaction}{177}{section.12.15} {12.16}char与varchar2}{178}{section.12.16} {12.17}number}{179}{section.12.17} {12.18}\ttfamily user\_tables, user\_objects}{179}{section.12.18} {12.19}truncate}{179}{section.12.19} {12.20}alter}{180}{section.12.20} {12.21}constraint}{180}{section.12.21} {12.21.1}primary key, unique}{181}{subsection.12.21.1} {12.21.2}unique}{182}{subsection.12.21.2} {12.21.3}foreign key}{182}{subsection.12.21.3} {12.22}view}{187}{section.12.22} {12.23}index, rowid}{187}{section.12.23} {12.24}sequence}{189}{section.12.24} {12.25}PL/SQL}{189}{section.12.25} {13}JDBC}{191}{chapter.13} {13.1}forName}{191}{section.13.1} {13.2}JDBC}{191}{section.13.2} {13.3}连接Oracle数据库及操作}{192}{section.13.3} {13.4}批处理模式}{195}{section.13.4} {13.5}分页查询}{196}{section.13.5} {13.5.1}MySQL}{198}{subsection.13.5.1} {13.6}连接池}{199}{section.13.6} {13.6.1}Wrapper}{199}{subsection.13.6.1} {13.7}DAO}{199}{section.13.7} {13.8}java.util.Date与java.sql.Date比较}{200}{section.13.8} {13.9}Meta Data}{201}{section.13.9} {13.10}可滚动结果集}{201}{section.13.10} {13.11}Procedure}{201}{section.13.11} {14}xml}{204}{chapter.14} {14.1}元素}{204}{section.14.1} {14.2}XML的设计}{205}{section.14.2} {14.3}DTD/Schema}{205}{section.14.3} {14.3.1}SAX应用}{206}{subsection.14.3.1} {14.4}dom4j}{207}{section.14.4} {14.5}XPath}{210}{section.14.5} {14.6}apache.commons}{211}{section.14.6} {15}sqlite3}{213}{chapter.15} {16}Web基础}{215}{chapter.16} {16.1}HTML}{215}{section.16.1} {16.2}head区域}{215}{section.16.2} {16.3}body区域}{216}{section.16.3} {16.4}常用标记}{216}{section.16.4} {16.4.1}span, div}{216}{subsection.16.4.1} {16.4.2}a}{216}{subsection.16.4.2} {16.4.3}img}{216}{subsection.16.4.3} {16.4.4}table}{217}{subsection.16.4.4} {16.5}form}{220}{section.16.5} {16.5.1}form的元素}{220}{subsection.16.5.1} {16.6}列表}{221}{section.16.6} {16.7}select与option}{221}{section.16.7} {16.8}frame}{222}{section.16.8} {16.9}CSS}{224}{section.16.9} {16.10}Selector}{228}{section.16.10} {16.11}样式属性}{230}{section.16.11} {16.11.1}border}{230}{subsection.16.11.1} {16.11.2}display}{230}{subsection.16.11.2} {16.11.3}position}{230}{subsection.16.11.3} {16.11.4}z-index}{231}{subsection.16.11.4} {16.11.5}文本属性}{231}{subsection.16.11.5} {16.11.6}边距属性}{231}{subsection.16.11.6} {16.11.7}float}{232}{subsection.16.11.7} {16.11.8}list-style}{232}{subsection.16.11.8} {16.12}JavaScript}{232}{section.16.12} {16.12.1}JavaScript基本语法}{236}{subsection.16.12.1} {16.12.2}内置数据类型}{237}{subsection.16.12.2} {16.12.3}带参数的函数}{237}{subsection.16.12.3} {16.13}常用内置对象}{238}{section.16.13} {16.13.1}String}{238}{subsection.16.13.1} {16.13.2}Array}{239}{subsection.16.13.2} {16.13.3}Math}{239}{subsection.16.13.3} {16.13.4}Date}{240}{subsection.16.13.4} {16.13.5}Error}{240}{subsection.16.13.5} {16.13.6}Regex}{240}{subsection.16.13.6} {16.13.7}Function}{240}{subsection.16.13.7} {16.13.8}Date}{241}{subsection.16.13.8} {16.14}页内显示}{241}{section.16.14} {16.15}DOM}{243}{section.16.15} {16.15.1}查询节点}{243}{subsection.16.15.1} {16.15.2}获取节点信息}{243}{subsection.16.15.2} {16.15.3}修改节点信息}{244}{subsection.16.15.3} {16.15.4}添加新节点}{244}{subsection.16.15.4} {16.15.5}删除节点}{244}{subsection.16.15.5} {16.16}页签效果}{244}{section.16.16} {16.17}封装}{244}{section.16.17} {16.18}表格的动态创建}{245}{section.16.18} {16.19}BOM}{246}{section.16.19} {16.19.1}window}{246}{subsection.16.19.1} {16.19.1.1}open(url)}{246}{subsubsection.16.19.1.1} {16.19.1.2}focus}{246}{subsubsection.16.19.1.2} {16.19.1.3}confirm}{246}{subsubsection.16.19.1.3} {16.19.1.4}prompt}{247}{subsubsection.16.19.1.4} {16.19.1.5}setInterval}{247}{subsubsection.16.19.1.5} {16.19.1.6}clearInterval}{247}{subsubsection.16.19.1.6} {16.19.1.7}setTimeout}{247}{subsubsection.16.19.1.7} {16.19.1.8}clearTimeOut}{247}{subsubsection.16.19.1.8} {16.19.2}location}{247}{subsection.16.19.2} {16.19.3}screen}{248}{subsection.16.19.3} {16.19.4}navigator}{248}{subsection.16.19.4} {16.19.5}event对象}{248}{subsection.16.19.5} {16.19.5.1}事件位置}{250}{subsubsection.16.19.5.1} {16.19.6}history}{250}{subsection.16.19.6} {16.20}Object-Oriented Programming}{250}{section.16.20} {17}Servlet}{259}{chapter.17} {17.1}什么是Servlet}{259}{section.17.1} {17.2}如何写Servlet}{259}{section.17.2} {17.3}安装tomcat与简单使用}{260}{section.17.3} {17.3.1}常见错误}{262}{subsection.17.3.1} {17.3.2}示例}{263}{subsection.17.3.2} {17.4}Servlet引用的jar包}{266}{section.17.4} {17.5}HTTP协议}{266}{section.17.5} {17.6}表单处理}{267}{section.17.6} {17.7}表单中文乱码}{267}{section.17.7} {17.8}MySQL}{268}{section.17.8} {17.8.1}创建数据库}{268}{subsection.17.8.1} {17.8.2}克隆数据库}{268}{subsection.17.8.2} {17.8.3}查看数据库编码}{268}{subsection.17.8.3} {17.8.4}创建表格}{269}{subsection.17.8.4} {17.8.5}插入记录}{269}{subsection.17.8.5} {17.8.6}查询、修改、删除记录}{269}{subsection.17.8.6} {17.8.7}使用SQL脚本}{270}{subsection.17.8.7} {17.8.8}分问题}{270}{subsection.17.8.8} {17.8.9}在Servlet中使用JDBC访问数据库}{271}{subsection.17.8.9} {17.8.10}连接数}{273}{subsection.17.8.10} {17.9}重定向}{273}{section.17.9} {17.10}DAO}{274}{section.17.10} {17.11}DAO工厂}{274}{section.17.11} {17.12}类加载器}{277}{section.17.12} {17.13}Servlet及数据库中文}{277}{section.17.13} {17.14}让servlet处理多种请求}{278}{section.17.14} {17.14.1}servlet容器如何处理请求资源路径?}{281}{subsection.17.14.1} {17.15}servlet的生命周期}{282}{section.17.15} {18}JSP}{284}{chapter.18} {18.1}JSP文件的写法}{284}{section.18.1} {18.2}JSP的执步骤}{285}{section.18.2} {18.3}JSP文件的指令}{285}{section.18.3} {18.4}转发}{286}{section.18.4} {18.4.1}转发与重定向的差别}{287}{subsection.18.4.1} {18.5}处理异常}{288}{section.18.5} {18.6}注册登录页面}{288}{section.18.6} {18.7}加密数据库密码列}{288}{section.18.7} {18.8}路径问题}{289}{section.18.8} {18.8.1}绝对路径的使用}{290}{subsection.18.8.1} {18.9}状态管理}{291}{section.18.9} {18.9.1}cookie}{291}{subsection.18.9.1} {18.9.1.1}cookie的编码}{291}{subsubsection.18.9.1.1} {18.9.1.2}cookie的生存时间}{292}{subsubsection.18.9.1.2} {18.9.1.3}cookie的路径问题}{292}{subsubsection.18.9.1.3} {18.9.1.4}cookie的限制}{293}{subsubsection.18.9.1.4} {18.9.2}session}{294}{subsection.18.9.2} {18.9.2.1}获取session}{294}{subsubsection.18.9.2.1} {18.9.2.2}session的方法}{295}{subsubsection.18.9.2.2} {18.9.2.3}session的超时}{296}{subsubsection.18.9.2.3} {18.9.2.4}删除session}{296}{subsubsection.18.9.2.4} {18.9.2.5}session验证}{297}{subsubsection.18.9.2.5} {18.10}购物车案例}{300}{section.18.10} {18.11}URL重写}{301}{section.18.11} {18.12}session的优缺点}{302}{section.18.12} {18.13}过滤器}{302}{section.18.13} {18.14}监听器}{303}{section.18.14} {18.15}ServletContext接口}{303}{section.18.15} {18.16}上传文件}{304}{section.18.16} {18.17}Servlet线程安全问题}{308}{section.18.17} {18.18}el表达式}{309}{section.18.18} {18.18.1}第一种方式}{310}{subsection.18.18.1} {18.18.2}第二种方式}{310}{subsection.18.18.2} {18.18.3}获取请求参数的值}{311}{subsection.18.18.3} {18.18.4}简单计算及输出等}{311}{subsection.18.18.4} {18.19}JSP标签}{311}{section.18.19} {18.19.1}JSTL}{312}{subsection.18.19.1} {18.19.2}自定义标签}{312}{subsection.18.19.2} {18.19.3}在JavaEE5及以上版本,如何使用el表达式与标准标签}{316}{subsection.18.19.3} {18.20}MVC}{317}{section.18.20} {18.20.1}在web开发中如何使用MVC}{318}{subsection.18.20.1} {18.20.2}MVC的特殊应用}{318}{subsection.18.20.2} {19}Ajax}{319}{chapter.19} {19.1}Ajax对象的属性}{319}{section.19.1} {19.2}编程}{320}{section.19.2} {19.3}Ajax中文处理}{321}{section.19.3} {19.3.1}链接地址包含中文}{321}{subsection.19.3.1} {19.3.2}链接地址包含中文参数值}{321}{subsection.19.3.2} {19.3.3}Ajax中的编码问题}{321}{subsection.19.3.3} {19.4}以post方式发送请求}{322}{section.19.4} {19.4.1}post请求时的中文编码}{322}{subsection.19.4.1} {19.5}Ajax级联下拉菜单示例}{322}{section.19.5} {19.6}Ajax的优点}{329}{section.19.6} {20}Json}{330}{chapter.20} {20.1}Json的语法}{330}{section.20.1} {20.2}在Ajax应用中使用Json}{330}{section.20.2} {20.2.1}Json字符串转换为JavaScript对象}{331}{subsection.20.2.1} {20.3}缓存问题}{334}{section.20.3} {21}jQuery}{335}{chapter.21} {21.1}使用jQuery}{335}{section.21.1} {21.2}jQuery对象与DOM对象的转换}{335}{section.21.2} {21.3}选择器}{336}{section.21.3} {21.4}DOM操作}{337}{section.21.4} {21.4.1}查询与修改}{337}{subsection.21.4.1} {21.4.2}创建}{338}{subsection.21.4.2} {21.4.3}插入删除节点}{338}{subsection.21.4.3} {21.4.4}复制节点}{339}{subsection.21.4.4} {21.4.5}属性操作}{339}{subsection.21.4.5} {21.4.6}样式操作}{339}{subsection.21.4.6} {21.4.7}遍历节点}{340}{subsection.21.4.7} {21.4.8}模拟操作}{341}{subsection.21.4.8} {21.5}事件处理}{344}{section.21.5} {21.5.1}事件}{345}{subsection.21.5.1} {21.5.2}事件冒泡}{346}{subsection.21.5.2} {21.5.3}jQuery事件对象属性}{346}{subsection.21.5.3} {21.6}动画}{347}{section.21.6} {21.7}类数组}{348}{section.21.7} {21.8}jQuery对Ajax开发的支持}{348}{section.21.8} {21.8.1}get, post}{349}{subsection.21.8.1} {21.8.2}.ajax}{350}{subsection.21.8.2} {21.9}Debugging jQuery}{351}{section.21.9} {22}struts2}{352}{chapter.22} {22.1}准备strut2开发类库}{352}{section.22.1} {22.2}struts配置}{354}{section.22.2} {22.3}安全路径}{354}{section.22.3} {22.4}用户访问}{355}{section.22.4} {22.5}访问数据库}{355}{section.22.5} {22.5.1}数据分页}{355}{subsection.22.5.1} {22.6}struts2分页查询、显示}{355}{section.22.6} {22.7}Ognl语言}{357}{section.22.7} {22.7.1}Ognl中的运算}{358}{subsection.22.7.1} {22.7.2}Ognl调用普通方法}{358}{subsection.22.7.2} {22.7.3}Ognl调用静态方法}{358}{subsection.22.7.3} {22.7.4}创建List}{358}{subsection.22.7.4} {22.7.5}创建Map}{359}{subsection.22.7.5} {22.7.6}投影}{359}{subsection.22.7.6} {22.7.7}选择性获取元素集合}{359}{subsection.22.7.7} {22.7.8}Ognl操作对象}{359}{subsection.22.7.8} {22.7.9}Struts2的Ognl}{360}{subsection.22.7.9} {22.8}Struts2标签}{360}{section.22.8} {22.8.1}数据提交}{361}{subsection.22.8.1} {22.8.2}测试对象是否为空}{362}{subsection.22.8.2} {22.8.3}获取checkbox项数据}{362}{subsection.22.8.3} {22.9}JUnit Test}{362}{section.22.9} {22.9.1}JUnit注释}{363}{subsection.22.9.1} {22.9.2}Debug Mode}{363}{subsection.22.9.2} {22.10}使用JavaScript提交表单}{364}{section.22.10} {22.11}使用JavaScript提交action请求}{365}{section.22.11} {22.12}Struts2对象创建模式}{366}{section.22.12} {22.13}获取session}{366}{section.22.13} {22.14}属性注入}{367}{section.22.14} {22.15}ActionSupport}{367}{section.22.15} {22.16}默认action}{368}{section.22.16} {22.17}struts2执流程}{368}{section.22.17} {22.18}常用result类型}{370}{section.22.18} {22.18.1}Struts2验证码}{372}{subsection.22.18.1} {22.19}Json插件}{374}{section.22.19} {22.20}Struts2动态action用法}{376}{section.22.20} {22.21}reset}{376}{section.22.21} {22.22}注解action}{377}{section.22.22} {22.23}More tags}{377}{section.22.23} {22.23.1}form, checkbox}{377}{subsection.22.23.1} {22.23.2}checkboxlist}{377}{subsection.22.23.2} {22.23.3}radio}{378}{subsection.22.23.3} {22.23.4}select}{378}{subsection.22.23.4} {22.23.5}使用服务器数据显示列表}{378}{subsection.22.23.5} {22.24}interceptor}{379}{section.22.24} {22.24.1}interceptor-stack}{381}{subsection.22.24.1} {22.24.2}默认拦截器}{382}{subsection.22.24.2} {22.24.3}引用父类拦截器}{383}{subsection.22.24.3} {22.25}struts安全验证}{383}{section.22.25} {22.26}struts2上传}{384}{section.22.26} {22.27}struts2国际化}{385}{section.22.27} {23}当当网项目}{386}{chapter.23} {23.1}struts2常量}{389}{section.23.1} {23.2}java.util.UUID}{390}{section.23.2} {23.3}获取IP地址}{390}{section.23.3} {23.4}动态嵌入另一页面}{390}{section.23.4} {23.5}jQuery.validate}{392}{section.23.5} {23.6}JSP页面布尔值判断}{395}{section.23.6} {23.7}创建产品与图书的数据库表格}{395}{section.23.7} {23.8}使用SSH重构的问题}{395}{section.23.8} {24}Hibernate}{398}{chapter.24} {24.1}ORM}{398}{section.24.1} {24.2}使用Hibernate}{399}{section.24.2} {24.3}表格创建}{400}{section.24.3} {24.4}获取Session}{401}{section.24.4} {24.5}hibernate事务}{402}{section.24.5} {24.6}查询}{402}{section.24.6} {24.7}主键生成策略(generator)}{403}{section.24.7} {24.8}默认值}{404}{section.24.8} {24.9}hibernate bean对象的生命周期}{404}{section.24.9} {24.9.1}数据同步}{405}{subsection.24.9.1} {24.10}Hibernate类型}{406}{section.24.10} {24.11}Hibernate懒加载}{407}{section.24.11} {24.11.1}懒加载原理}{408}{subsection.24.11.1} {24.11.2}使用懒加载}{408}{subsection.24.11.2} {24.11.3}在Struts2中应用懒加载机制}{409}{subsection.24.11.3} {24.11.4}使用Hibernate维护单对象session}{412}{subsection.24.11.4} {24.12}ORM}{412}{section.24.12} {24.12.1}many-to-one}{413}{subsection.24.12.1} {24.12.2}one-to-many}{413}{subsection.24.12.2} {24.12.3}many-to-many}{414}{subsection.24.12.3} {24.12.4}双向关联映射}{416}{subsection.24.12.4} {24.12.5}关系表}{417}{subsection.24.12.5} {24.12.6}Hibernate继承关系}{418}{subsection.24.12.6} {24.12.7}Hibernate组件映射}{419}{subsection.24.12.7} {24.13}HQL语句}{420}{section.24.13} {24.14}QBC语句}{422}{section.24.14} {24.15}使用SQL语句}{422}{section.24.15} {24.16}Hibernate缓存}{423}{section.24.16} {24.16.1}一级缓存}{423}{subsection.24.16.1} {24.16.1.1}批处理}{424}{subsubsection.24.16.1.1} {24.16.2}二级缓存}{424}{subsection.24.16.2} {24.16.3}查询缓存}{427}{subsection.24.16.3} {24.17}Hibernate锁机制}{428}{section.24.17} {24.17.1}悲观锁}{428}{subsection.24.17.1} {24.17.2}乐观锁}{429}{subsection.24.17.2} {24.18}Ant及Maven}{429}{section.24.18} {24.19}Hibernate注解}{429}{section.24.19} {25}Spring}{430}{chapter.25} {25.1}概念}{430}{section.25.1} {25.2}Spring开发}{431}{section.25.2} {25.2.1}依赖注入}{431}{subsection.25.2.1} {25.2.2}集合注入}{433}{subsection.25.2.2} {25.3}log4j}{434}{section.25.3} {25.4}Spring容器}{435}{section.25.4} {25.5}Spring容器对Bean对象的管理}{436}{section.25.5} {25.5.1}lazy-init}{436}{subsection.25.5.1} {25.5.2}Bean对象的初始化与销毁}{437}{subsection.25.5.2} {25.6}AOP与代理模式}{437}{section.25.6} {25.6.1}动态代理模式}{438}{subsection.25.6.1} {25.6.2}Spring代理模式}{440}{subsection.25.6.2} {25.6.2.1}第一种情况}{440}{subsubsection.25.6.2.1} {25.6.2.2}第二种情况}{441}{subsubsection.25.6.2.2} {25.6.2.3}第三种情况:使用schema配置}{443}{subsubsection.25.6.2.3} {25.7}单例模式及Bean的作用域}{445}{section.25.7} {25.8}Spring JDBC}{446}{section.25.8} {25.9}Spring与Struts2集成}{448}{section.25.9} {25.10}Struts2, Spring, Hibernate}{450}{section.25.10} {25.10.1}spring-test: 使用注解方式测试}{455}{subsection.25.10.1} {25.11}Spring管理Hibernate}{456}{section.25.11} {25.12}分层管理Spring配置文件}{462}{section.25.12} {25.13}Spring中的Hibernate懒加载}{462}{section.25.13} {25.14}Spring中文过滤器}{463}{section.25.14} {25.15}Spring读取属性(.properties)文件}{464}{section.25.15} {25.16}Spring中的Hibernate数据库操作}{465}{section.25.16} {25.17}分页查询}{465}{section.25.17} \contentsline {chapter}{Todo list}{478}{lstnumber.-637.8} {A}T-GWAP}{480}{appendix.A} {A.1}PO}{480}{section.A.1} {A.2}DAO}{480}{section.A.2} {A.2.1}使用连接池}{480}{subsection.A.2.1} {A.3}BO}{485}{section.A.3} {A.3.1}ThreadLocal}{486}{subsection.A.3.1} {A.4}FC}{486}{section.A.4} {A.5}View}{486}{section.A.5} {A.6}框架}{486}{section.A.6} {A.6.1}简单工厂}{486}{subsection.A.6.1} {B}问题}{489}{appendix.B} \contentsline {chapter}{Index}{491}{section*.9} {B.0.2},}{491}{subsection.B.0.2}
vue el-tableel-form 是Vue.js框架中常用的组件。el-table组件用于展示表格数据,el-form组件用于创建表单。通过将el-tableel-form结合使用,可以在表格中添加表单元素,实现更复杂的数据操作和交互功能。 在使用el-tableel-form时,可以通过以下步骤来实现表格与表单的结合: 1. 在Vue组件中引入el-tableel-form组件,并在模板中使用它们。 2. 在el-table中使用el-table-column组件来定义表格的列,同时可以在列中添加el-form-item组件,用于展示和编辑表单元素。 3. 在el-form-item中使用el-input、el-select等组件来创建表单元素,可以通过v-model指令来实现数据的双向绑定。 4. 通过监听表单的提交事件,可以获取表单数据并进相应的处理。 示例代码如下所示: ```vue <template> <div> <el-table :data="tableData" style="width: 100%"> <el-table-column label="姓名" prop="name"></el-table-column> <el-table-column label="年龄" prop="age"></el-table-column> <el-table-column label="性别" prop="gender"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-form-item> <el-button @click="edit(scope.row)">编辑</el-button> </el-form-item> </template> </el-table-column> </el-table> <el-dialog :visible.sync="dialogVisible"> <el-form :model="formData" ref="form" label-width="80px"> <el-form-item label="姓名"> <el-input v-model="formData.name"></el-input> </el-form-item> <el-form-item label="年龄"> <el-input v-model="formData.age"></el-input> </el-form-item> <el-form-item label="性别"> <el-select v-model="formData.gender"> <el-option label="男" value="男"></el-option> <el-option label="女" value="女"></el-option> </el-select> </el-form-item> </el-form> <div slot="footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="save">保存</el-button> </div> </el-dialog> </div> </template> <script> export default { data() { return { tableData: [{ name: '张三', age: 18, gender: '男' }, { name: '李四', age: 20, gender: '女' }], dialogVisible: false, formData: {} }; }, methods: { edit(row) { this.formData = Object.assign({}, row); this.dialogVisible = true; }, save() { // 提交表单数据的逻辑处理 // ... this.dialogVisible = false; } } }; </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值