Element-UI的响应式布局如何实现？

本文共计654个文字，预计阅读时间需要3分钟。

目录 + Element-UI Table 表格指定列添加点击事件 + Element-UI Table 表格定位问题 + 问题描述 + 解决方案 + Element-UI Table 表格指定列添加点击事件 + 如下所示，这是一个Element UI库中的table，通常情况下，我们“

目录

• Element-UI Table 表格指定列添加点击事件
• element-ui table表格错位问题
• 问题描述
• 解决方案

Element-UI Table 表格指定列添加点击事件

如下图所示，这是一个ele UI库中的table，一般情况下我们只能通过tableDATA来向里面填充数据来展示，而无法对其中添加点击时间等操作。这里就来记录学习一下。

这是我们的一般使用方法，只能将数据进行展示。我们需要在el-table-column标签里面来进行处理

<el-table :data="tableData" style="width: 100%;height: 450px;" :row-class-name="tableRowClassName"> :row-class-name="tableRowClassName"> <el-table-column prop="title" label="" width="500"> </el-table-column> <el-table-column prop="author" label="" width="100"> </el-table-column> </el-table>

我们在标签里面加上我们自定义的标签，可以通过{{scope.row.title}}的方法来获取数据，并来修改展示的效果。

如下面所示。

<el-table :data="tableData" style="width: 100%;height: 450px;" :row-class-name="tableRowClassName"> :row-class-name="tableRowClassName"> <el-table-column prop="title" label="" width="500"> <template slot-scope="scope"> <a @click="detail(scope.row.id)" style="color:black;cursor:pointer;font-size: 16px;">{{ scope.row.title }}</a> </template> </el-table-column> <el-table-column prop="author" label="" width="100"> </el-table-column> </el-table>

element-ui table表格错位问题

问题描述

在使用element-ui中的 el-table 时，使用了 fixed 属性固定列之后，就会容易在各种场景出现表格错位的问题。

解决方案

解决办法1 element-ui官网提供的doLayout方法：

• doLayout：对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法

直接在渲染表格时加入此方法

this.$nextTick(() => {       // myTable是表格的ref属性值       if (this.$refs.myTable && this.$refs.myTable.doLayout) {         this.$refs.myTable.doLayout();       } })

解决办法2 element-ui官网提供的doLayout方法：

1.给所有的列增加width,即可解决

2.把 加了fixed属性的 固定列的 min-width 改成 width

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。