element table 点击单元格事件

 <el-table

        :data="tableData.list"

        stripe

        border

        style="width: 100%; margin-top: 10px"

        size="mini"

         @cell-click="lookDetil"

        >

            <el-table-column prop="parkingLotNumber" label="停车场编号" width="180"/>

            <el-table-column prop="parkingLotName" label="停车场名称"/>

            <el-table-column prop="province" label="省" />

            <el-table-column prop="city" label="市" />

            <el-table-column prop="area" label="区" />

            <el-table-column prop="repairReason" label="报修原因" width="80" :show-overflow-tooltip="true"/>

            <el-table-column prop="userName" label="指派人员"></el-table-column>       

            <el-table-column label="操作" fixed="right" align="center">

                <template slot-scope="scope">

                    <el-button type="text" size="small" @click.stop="dellog(scope.row)" authorityKey="1804:BXDDSC" style="color:red;">删除</el-button>

                </template>

            </el-table-column>

        </el-table>

给单元格增加点击单元格事件,会发生事件冒泡,需得给单元格里面的事件加上防止事件冒泡,这也就不会发生事件冒泡

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: Element Table合并单元格是指在使用Element UI框架中的表格组件时,将相邻的单元格合并成一个大的单元格,以便更好地展示数据。在Element UI中,可以通过设置表格组件的属性来实现单元格合并,具体方法如下: 1. 在表格组件中设置属性span-method,该属性的值为一个函数,用于计算每个单元格的合并方式。 2. 在span-method函数中,根据需要合并的单元格的位置和数据进行判断,返回一个包含rowspan和colspan属性的对象,用于指定单元格的合并方式。 3. 在表格组件中设置属性row-key,该属性的值为一个字符串,用于指定表格数据中每行数据的唯一标识,以便在合并单元格时正确地计算行数。 通过以上步骤,就可以实现Element Table合并单元格的功能。 ### 回答2: 元素表格是常见的数据展示方式,为了更好的呈现数据以及提高表格的易读性,有时需要将表格中的单元格进行合并。Element table合并单元格的方式有多种,下面将一一介绍。 1. rowspan和colspan属性合并单元格Element table中可以通过使用rowspan和colspan属性来合并单元格。其中,rowspan属性表示合并行数,colspan属性表示合并列数。下面是一个例子: ```html <el-table> <el-table-column label="姓名" rowspan="2"></el-table-column> <el-table-column label="语文" colspan="2"></el-table-column> <el-table-column label="数学" colspan="2"></el-table-column> </el-table> ``` 上面的例子中,第一列的单元格向下合并了一行,第二列和第三列的单元格向右合并了两列。具体效果如图所示: ![rowspan和colspan属性合并单元格](https://img-blog.csdnimg.cn/20211203113049874.png) 2. 合并相邻元素的单元格Element table中,还可以通过合并相邻元素的单元格来实现单元格合并的效果。具体步骤如下: 首先,设置表头单元格的display属性为none,如下所示: ```html <el-table> <el-table-column label="姓名"></el-table-column> <el-table-column label="语文"></el-table-column> <el-table-column label="数学"></el-table-column> </el-table> <style> .hidden-header-cell { display: none; } </style> ``` 然后,在数据行中,将要合并的单元格设置为相邻元素且宽度为0,如下所示: ```html <el-table> <el-table-column label="姓名"></el-table-column> <el-table-column label="语文" width="0"> <template slot-scope="{ row }"> <div class="hidden-header-cell">{{ row.chinese }}</div> </template> </el-table-column> <el-table-column label="数学" width="0"> <template slot-scope="{ row }"> <div class="hidden-header-cell">{{ row.math }}</div> </template> </el-table-column> </el-table> ``` 上面的例子中,数据行中的语文和数学单元格通过设置宽度为0的div元素来实现合并单元格的效果。具体效果如图所示: ![合并相邻元素的单元格](https://img-blog.csdnimg.cn/20211203113231301.png) 以上就是Element table合并单元格的两种方法,其中第一种方法使用rowspan和colspan属性合并单元格,第二种方法则通过设置相邻元素的单元格来实现单元格合并效果。在实际开发中,应根据实际情况选择最为适合的合并方式。 ### 回答3: 元素表是常用的数据展示方式,但当数据表格很大或需要显示较多的数据时,单元格数量就会增加。这时候,为了方便观察和分析数据,可以使用元素表合并单元格的功能。 合并单元格指的是将两个或多个相邻的单元格合并成为一个单元格。合并后的单元格会自动占据原来的多个单元格的空间,但其中只会保留一个单元格中的内容和格式。 合并单元格在元素表中的应用主要体现在以下三个方面: 1.优化数据展示:当表格中有大量的数据需要显示时,将一些相邻的单元格合并可以让表格变得更加简洁明了,从而更方便观察和分析数据。 2.美化表格布局:通过将表格中某些单元格合并,可以让表格的布局更加整齐,让表格中的内容更加清晰易懂。 3.提高数据处理效率:通过合并单元格,可以减少单元格的数量,从而提高数据处理的效率和速度。 要实现合并单元格的功能,可以采用以下方法: 1.选中需要合并的单元格。可以采用鼠标拖动或者Shift加上方向键的方式进行单元格的选中。 2.右击选中的单元格,弹出的快捷菜单中选择“合并单元格”。 3.合并后的单元格会自动占据原来的多个单元格的空间,但其中只会保留一个单元格中的内容和格式。 需要注意的是,合并单元格时需要注意表格的数据和格式的完整性,特别是当某个单元格中包含了重要的数据时,需要确保这个单元格不会被合并,否则可能会对数据的准确性和完整性造成影响。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值