elementui 展示列表模板_elementUI双击表格展示输入框

1、在 Table 标签内加入这两个方法，直接复制进去就可以

@cell-click="tabClick"

:row-class-name="tableRowClassName"

2、在el-table-column 标签内加入 template 标签内容

label="设备名称"

prop="mdeviceName"

width="150"

show-overflow-tooltip

:render-header="renderHeader"

maxlength="300"

placeholder="请输入设备名称"

size="mini" @blur="inputBlur"/>

3、在方法和对象区域复制以下内容

export default {

data() {

return {

tabClickIndex: null, // 点击的单元格

tabClickLabel: '', // 当前点击的列名

}

methods: {

tableRowClassName({row, rowIndex}) {

// 把每一行的索引放进row

row.index = rowIndex

/**

* 添加明细原因 row 当前行 column 当前列

tabClick(row, column, cell, event) {

switch (column.label) {

case '设备名称':

this.tabClickIndex = row.index

this.tabClickLabel = column.label

break

case '设备编码':

this.tabClickIndex = row.index

this.tabClickLabel = column.label

break

default:

return

}

// console.log('----------', this.tabClickIndex, row, column, cell, event)

/**

* 失去焦点初始化

inputBlur(row, event, column) {

this.tabClickIndex = null

this.tabClickLabel = ''

}

elementui 展示列表模板_elementUI双击表格展示输入框相关推荐

用layui 模板，数据表格展示图片,
1.1 layui数据表格展示图片的基础使用 js <script> layui.use(['tree', 'util','upload','table'], function(){var ...
html展示列表,如何在HTML中展示列表？
如何在HTML中展示列表? 在HTML中,我们可以创建三种类型的列表: 无序列表有序列表描述列表无序列表无序列表是顺序或顺序无关紧要的项的集合或集合.如果我们要在 HTML文档中创建无序列表以 ...
elementui 双击el-table表格展示输入框修改数据
参考:element ui 双击表格展示输入框修改数据_7ing酒的博客-CSDN博客_双击输入框展示: 功能:就是一个简单的table表格通过双击某一项进行修改.(其实就是双击之后变成一个in ...
vue+element Carousel实现幻灯片展示列表并联动时间线
工作中开发的一个小组件,使用element幻灯片展示列表,并且使用时间线展示数据所有的年份月份并根据是否支付显示不同的颜色,点击时间线上的月份可以跳转到对应的幻灯片并选中复制代码运行即可 // 月结 ...
使用element-ui使用表格展示微信头像
要求:使用element-ui使用表格展示微信头像借鉴的原博:https://blog.csdn.net/qq_41588568/article/details/100196905 效果图: < ...
[Vue]如何实现一个简单的表格数据筛选查找 (根据ElementUI表格展示)(数组筛选)
[Vue]如何实现一个简单的表格数据筛选查找 (根据ElementUI表格展示)(数组筛选) 能够解决的问题在一个完整的数据数据渲染的 elementui 表格组件中,筛选输出数据目录布局代码 ...
VUE+ElementUI生成Excel模板导入数据生成表格(自适应)
VUE+ElementUI生成Excel模板导入数据生成表格(自适应) 最近项目需求,需要根据条件查询对应数据的参数(每条数据的参数名称和个数都不一样) ,生成Excel表格模板,再通过Excel模 ...
前端Vue+ElementUI的Pagination分页组件实现分页展示后端Spring Boot +Mybatis Plus实现分页接口
前端Vue+ElementUI的Pagination分页组件实现分页展示 & 后端Spring Boot +Mybatis Plus实现分页接口很久没有更新博客了,主要原因是博主一直在补充自 ...
layui数据表格（一：基础篇，数据展示、分页组件、表格内嵌表单和图片）
表格展示神器之一:layui表格前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstrap table.layui table ...

elementui 展示列表模板_elementUI双击表格展示输入框

elementui 展示列表模板_elementUI双击表格展示输入框相关推荐

最新文章

热门文章