el-table多选结果不生效

最新推荐文章于 2024-05-29 18:18:52 发布

Score666

最新推荐文章于 2024-05-29 18:18:52 发布

阅读量448

点赞数 7

分类专栏： Vue前端学习文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/score666/article/details/135412907

版权

Vue前端学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章讨论了在使用ElementUI的el-table组件时，如何添加列类型如selection和index，以及遇到表格布局变化后如何通过刷新(F5)恢复的问题和解决方法。

摘要由CSDN通过智能技术生成

<el-table-column type="selection" width="55" />
<el-table-column type="index" label="序号" width="100" />
<el-table-column prop="name" label="分类名称" />

加上第一行后，发现表格变成了这样：

解决：按一下F5

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Score666

关注关注

7
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
el-table多选结果不生效

【代码】el-table多选结果不生效。
复制链接

扫一扫

专栏目录

el-table-infinite-scroll:El-Table无限滚动

05-26

element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。查看实例教程此指令依赖于 element-ui@2.12.0，使用前请熟悉：element-ui@2.12.0element-ui@2.12.0安装npm install --save el-table-infinite-...

改变el-table宽度

12-12

首先，我们需要了解`el-table`是Element UI提供的表格组件，它提供了丰富的样式和交互功能。在示例代码中，`el-table`被设置为全宽，并绑定了数据`tableData`。每列的宽度通过`:width`属性进行设定，这些宽度值是...

1 条评论您还未登录，请先登录后发表或查看评论

element-ui表格固定列错位

最新发布

七号程序员的博客

05-29

306

选择框选中数据后作为表头动态展示

Element UI遇到问题小结

chenyuafra的博客

04-28

491

el-select 选项无法选择的问题 <el-select v-model="form.value" filterable @change="select_status"> <el-option v-for="item in List" :key="item.id" :label="item.Name" :value="item.id"></el-option> </el-select> select_status(value){ thi

记录：解决element中表格错位问题

cherry_hh的博客

01-27

949

文章目录具体使用的代码如下： element中提供doLayout的方法可解决具体使用的代码如下： <el-table ref="listAll" :data="list_all" > </el-table> data(){ return { list_all:[] } } watch:{ list_all() { this.$nextTick(() => { this.$refs.listAll.

element-ui动态设置tabel列时,无效果,表头抖动,表格错乱,值不能正常展示等问题

指尖笑

07-20

4190

踩坑日记：最近用element-ui做一个动态列（频繁隐藏显示列）的表格踩坑记录下： 1、在el-table-column上使用v-show绑定是无效果 2、el-table-column几次切换显示/隐藏后，发现表格的排版完全乱了,或者值不能正常展示 3、表格头抖动原因分析： 1、v-show绑定无效果的原因： v-show起作用的本质是利用display:none控制隐藏，el-table-column的td是利用了display: table-cell 控制显示，而display：table-c

vue el-table实现行内编辑功能

10-15

在Vue.js中，Element UI库提供了丰富的UI组件，其中`el-table`是用于展示表格数据的一个强大组件。本文将详细讲解如何在Vue项目中利用Element UI的`el-table`实现行内编辑功能。首先，我们需要在`el-table`的表头...

解决elementui 多个el-table切换样式错乱问题，以及doLayout的坑

weixin_43020925的博客

10-19

8620

天坑的饿了么ui，最近有个需求需要在弹窗里做一个表格切换功能，但是多个表格进行切换时，样式会错乱，用v-if也没有，后面按照官方文档提示，通过再el-tabe上绑定个ref，然后使用doLayout这个方法解决，可是最后结果就是一直报错doLayout is not a function，试了无数种方法，在el-dialog的opened回调里调用，写在this.$nextTick回调里，甚至升级到最新版elementui，可是还是没卵用，真的佛了。最后发现只需要在el-table上绑定一个唯一的key值

el-table使用fixed固定一列后表格错位

qq_43765727的博客

06-02

3256

el-table使用fixed固定一列后表格错位

elementUI多选框选中没有响应

Fulling的博客

03-28

1244

使用element的表格多选框，点击多选框没有反应。

el-table 中嵌入 el-select，选中失效问题记录

LiangHui0914的博客

11-02

1946

el-table 中嵌入 el-select，选中失效问题记录

vue el-table中使用el-select选中后无效

youyudexiaowangzi的专栏

06-06

2196

需求：表格中一行显示一条数据，数据中的某个属性要展示一列，并且再另一列中用el-select用作选择修改，修改后提示用户是从从原来的状态改为新状态。表格数据从服务器返回，为了修改时获取原来的状态和新状态，给每一行数据新增了一个字段，但是点击下拉框的时候发现下拉框选择后没有生效，几经调整后发现是添加新字段的原因服务器返回数据：returnData:数组。。。。 this.users = returnData this.users.forEach(item=>{

【vue element-ui 】el-table中使用checkbox视图更新滞后

SingDanceRapBall的博客

06-27

3000

本来想通过列表中每个对象的某个属性绑定到checkbox的状态，但是发现有个问题：就是点击复选框后，数据确实改变了，但是视图没有改变，当点击其他row的时候，才会更新之前的数图。如下图，第1次勾选第一行没反应，再点击其他行才会更新视图。

解决el-table中动态添加固定列时出现的行错位

weixin_45435545的博客

04-25

321

【代码】解决el-table中动态添加固定列时出现的行错位。

el-table设置表格高度无效

qq_45325025的博客

08-19

3310

我的项目表格的列，是请求后台后，拿到数据才进行渲染的，也就是动态的，所以在项目中遇到，即使我设置了表格高度，渲染出来的表格高度依然没有高度，但是只要我屏幕缩放，高度就会生效。el-table__body-wrapper自适应失败，网上说是element的bug，改变思路，在element官方文档中发现了如下方法。明明下方有空白，但是table只能显示一部分，但是屏幕一缩放，高度就恢复了，打开控制台发现。每当调用获取table数据的方法后调用一下。当获取数据后，对table进行重新渲染。

element表格错位问题

qq_33423773的博客

04-14

1725

element表格错位问题出现的问题解决方法一解决方法二出现的问题在加载表格后总是出现错位问题，如下图：操作列的错位最为明显，其他列的也有，这样总感觉不舒服解决方法一使用element表格的方法dolayout(),在请求数据之后加入代码this.$refs.tableData.dolayout()，这方法不一定有效，也有可能是我代码哪写的有问题导致没起效，但是每个表格添加这个方法总是繁琐的。解决方法二在初始化样式文件上添加上以下代码 body .el-table th.gutter { d

el-table 多选部分不可选

07-20

你可以通过配置 `el-table` 的 `disabled` 属性来实现多选部分不可选的效果。首先，你需要为每一行的数据对象添加一个 `disabled` 字段，用于控制该行是否可选。然后，在 `el-table-column` 组件中使用 `scoped-slot` 来自定义列的内容，并根据 `disabled` 字段的值来决定是否禁用复选框。以下是一个示例代码： ```html <template> <el-table :data="tableData" style="width: 100%"> <el-table-column type="selection" :selectable="selectable"> <template slot-scope="{ row }"> <el-checkbox :disabled="row.disabled" v-model="selection"></el-checkbox> </template> </el-table-column>  </el-table> </template> <script> export default { data() { return { tableData: [ { name: 'Item 1', disabled: false }, { name: 'Item 2', disabled: true }, { name: 'Item 3', disabled: false }, // 其他数据行 ], selection: [] }; }, methods: { selectable(row) { return !row.disabled; } } }; </script> ``` 在上述示例中，`tableData` 数组包含了表格的数据，每一行数据对象都有一个 `disabled` 字段来表示该行是否可选。在 `el-table-column` 组件中，使用 `selectable` 属性来设置是否可选，通过 `scoped-slot` 来自定义列的内容，并根据 `row.disabled` 的值来决定是否禁用复选框。最终，选中的行数据会保存在 `selection` 数组中。这样配置后，`el-table` 的多选部分中的禁用行将无法被选中。