【技巧】实现饿了么Element UI的table单击（点击）编辑单元格内容

<template><el-table@cell-click="tableCellClick":cell-class-name="({ row, column, rowIndex, columnIndex }) => ((row.index = rowIndex), (column.index = columnIndex))":data="tableData"><!-- 点击表格可以编辑■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ --><el-table-column label="labelName" align="center" show-overflow-tooltip><template slot-scope="scope"><spanv-if="scope.row.index === tableCellClickRowIndex &&scope.column.index === tableCellClickColumnIndex"><el-inputplaceholder="请输入内容…"v-model="scope.row.labelName"@blur="tableCellInputBlur"size="mini"autofocus/></span><span v-else>{{ scope.row.labelName }}</span></template></el-table-column></el-table>
</template><script>
export default {data() {return {// 点击表格可以编辑■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■tableCellClickRowIndex: null, // 点击的单元格行索引tableCellClickColumnIndex: null, // 点击的单元格列索引tableData: [{labelName: "可以编辑的文本内容1",},{labelName: "可以编辑的文本内容2",},{labelName: "可以编辑的文本内容3",},],};},methods: {// 点击表格可以编辑■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■tableCellClick(row, column, cell, event) {this.tableCellClickRowIndex = row.index;this.tableCellClickColumnIndex = column.index;},// 单元格失去焦点tableCellInputBlur(row, event, column) {this.tableCellClickRowIndex = null;this.tableCellClickColumnIndex = null;},},
};
</script>

【技巧】实现饿了么Element UI的table单击（点击）编辑单元格内容相关推荐

element ui 第一列相同数据相同合并单元格
template部分 <el-table :data="tableData" :span-method="objectSpanMethod" border ...
Element UI 的 table 单元格合并
项目中遇到表格单元格合并的需求,在此记录整个解决过程. 项目使用的是 Element UI,表格使用的是 table 组件.Element UI 的 table 表格组件中对单元格进行合并,需要使用 ...
Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
Element UI 之table表格表头过长使用点点…显示，并添加鼠标移入悬浮显示
Element UI 之table表格表头过长使用点点-显示,并添加鼠标移入悬浮显示需求鼠标移入表头关键点: 1.样式中添加:(如果在scope中会不起作用) .el-table .cell { ...
element更改表格表头、行、指定单元格样式
element更改表格表头.行.指定单元格样式更改表格的样式使用header-cell-style属性,可为函数或对象函数写法  <el-table ...
excel单元格内容拆分_自学EXCEL小技巧003→单元格内容拆分
技巧003实现效果:对一个单元格内容进行拆分到多个单元格.备注:主要是为了拆分"文字"+"数字/字母"+文字之类的文本类型. 第一步:将光标放在第一个要拆分的单 ...
Excel技巧1：将符合要求的多个单元格内容合并到一个单元格
Excel技巧1 在一个区域内,如下表中,A列有多个相同的内容,而对应的同一行B列中的值不相同,需要把这些不同的B列值组合到一个单元格中. 比如把所有"Alice"对应的B列情绪合 ...
element el-table组件修改表格表头和某个单元格背景色
element el-table组件修改表格表头和某个单元格背景色 <template><div><el-table:data="tableData" ...
Element UI 中table合并单元格
Element UI组件库合并table单元格函数封装 DOM: <el-table:data="tableData"size="mini"class=& ...

【技巧】实现饿了么Element UI的table单击（点击）编辑单元格内容

【技巧】实现饿了么Element UI的table单击（点击）编辑单元格内容相关推荐

最新文章

热门文章