vue给列表添加序号_element-UI——el-table添加序号

转载自:https://www.cnblogs.com/langxiyu/p/10641060.html

Part.1 示例

当我们想在 el-table 中添加序号列时,如下:

label="序号"

type="index"

width="50"

align="center">

Part.2  问题

我们会惊奇的发现,我们翻页时,序号永远都是从1开始。因为每一次翻页都是根据当前数据的index显示,所以我们要自定义

Part.3  解决

关键代码:

(page - 1) * pageSize + scope.$index + 1 // (当前页 - 1) * 当前显示数据条数 + 当前行数据的索引 + 1

改造如下:

67d0865f17d9be527254bf8a8ff6c5b4.gif

label="序号"

type="index"

width="50"

align="center">

{{(page - 1) * pageSize + scope.$index + 1}}

67d0865f17d9be527254bf8a8ff6c5b4.gif

Element Ui中table实现表格编辑效果

主要以css实现 .tb-edit .el-input, .tb-edit .el-input-number, .tb-edit .el-select { display: none; width: ...

Element UI的Table用法

Table 表格 用于展示多条结构类似的数据,可对数据进行排序.筛选.对比或其他自定义操作. ¶基础表格 基 2016-05-02 王小虎 上海市普陀区金沙江路 1518 弄 2016-05-04 王 ...

element ui 合计/table show-summary

在el-table 上面加上show-summary就可以对table的数据进行合计 但是上次出现了合计栏有的为空,有的合计不对的情况,如果出现的是空,那么说明你渲染的数据有undefine(即后台返 ...

element ui里面table分页,页数从0开始的怎么做?

需求: 后台请求的接口是从0页开始的,但是pagination是从1开始的,就是在点击pagination的第1页是后台转0 1首先在data里面定义为1,其他地方也是定义1 return { for ...

怎么样使element ui 的table某列变色

第一步.在el-table里面加上:row-style="rowClass"

element ui的table的头部自定义

普通element ui table组件的使用

1.使用基础的element ui 的table的基础使用 首先,使用前要先引用element库到项目中,可以直接引入element的js和css或者在vue项目下按需加载不同的组件 废话不多说,直接 ...

封装一个优雅的element ui表格组件

现在做后台系统用vue + elementUI 的越来越多,那element ui的 el-table 组件肯定也离不开.虽然element ui的table组件很好.但是表格和分页是分离的.每次写表 ...

使用vue的v-for生成table , 给table加上序号

现在有一个使用mybatis的分页插件生成的table,table中数据是通过vue获得的 , 前台显示使用

后台v ...

element UI 调整表格行高

使用element UI的table默认属性,绘制表格如下: 该表格的行高太大了,于是想调小一些. 查看官网的文档,table有几个属性, row-style:行的 style 的回调方法,也可以使用 ...

随机推荐

委托,匿名函数和lambda表达式

很早之前就接触到了委托,但是一直对他用的不是太多,主要是本人是菜鸟,能写的比较高级的代码确实不多,但是最近在看MSDN微软的类库的时候,发现了微软的类库好多都用到了委托,于是决定好好的研究研究,加深一 ...

bfrd collector性能排查

1.2.09上昨天timeout在18点23分-22点10分 2.检测2.17网卡流量,sar -f /var/log/sa/sa06 -n DEV,发现这段时间刚好是rxpck/s超过6400. ...

剑指offer系列26--正则表达式匹配

[题目]请实现一个函数用来匹配包括’.’和’*‘的正则表达式.模式中的字符’.’表示任意一个字符,而’‘表示它前面的字符可以出现任意次(包含0次). 在本题中,匹配是指字符串的所有字符匹配整个模式.例 ...

C和C++函数互相调用

Call C++ function from C & Call C function from C++ (C和C++函数互相调用) By williamxue on Jun 12, 2007 ...

MyBatis6:MyBatis集成Spring事务管理(下篇)

前言 前一篇文章复习了MyBatis的基本使用以及使用Spring管理MyBatis的事务的做法,本文的目的是在这个的基 ...

jQuery插件

1. Lightbox 2:    Lightbox 2 是一款很酷的图片显示插件,可以在一个平滑展开的新窗口中展现出图片,而同时页面的其余部分都变成黑色背景.使用这款插件,是为了当你的的图片过大必须 ...

structure and interpretation of Computer programs -- Foreword

Foreword  前言 Educators, generals, dieticians, psychologists, and parents program.   Armies, students ...

Python--变量作用域

变量作用域: 一般在函数体外定义的变量成为全局变量,在函数内部定义的变量称为局部变量. 全局变量所有作用域都可读,局部变量只能在本函数可读 函数在读取变量时,优先读取函数本身自有的局部变量,再去读全局 ...

「HGOI#2019.4.19省选模拟赛」赛后总结

t1-Painting 这道题目比较简单,但是我比较弱就只是写了一个链表合并和区间DP. 别人的贪心吊打我的DP,嘤嘤嘤. #include #define ...

创建smartfroms页格式

1.输入TCODE:spad 2.页格式:完全管理  ---> 设备类型 ---> 页格式 ---> 创建 3.比如:长:24.2cm 宽:11.5cm 则设置:纸宽:115MM 纸 ...

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VueElement UI 都提供了一些内置的指令和组件,可以方便地实现列表拖拽功能。下面是一个简单的示例: 1. 安装 Element UIVue 项目中使用 Element UI,需要先安装 Element UI: ``` npm install element-ui -S ``` 2. 引入 Element UIVue 项目的入口文件中引入 Element UI: ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 3. 创建一个可拖拽的表格 使用 Element UI 的 `el-table` 组件创建一个表格,并添加 `el-table-column` 组件来定义表格的列。在每一列的 `header` 中添加 `draggable` 属性,并绑定一个事件处理函数。 ```html <template> <div class="drag-table"> <el-table :data="tableData" style="width: 100%" @sort-change="handleSortChange"> <el-table-column type="index" label="序号" width="50"></el-table-column> <el-table-column label="名称" prop="name" header-draggable @header-dragend="handleHeaderDragEnd"></el-table-column> <el-table-column label="年龄" prop="age"></el-table-column> <el-table-column label="地址" prop="address"></el-table-column> </el-table> </div> </template> ``` 在 `handleHeaderDragEnd` 方法中,获取拖拽结束后的表头位置信息,并根据位置信息重新排列表格列的顺序。 ```javascript export default { data() { return { tableData: [ { name: '张三', age: 18, address: '北京市海淀区' }, { name: '李四', age: 20, address: '上海市浦东新区' }, { name: '王五', age: 22, address: '广州市天河区' }, { name: '赵六', age: 24, address: '深圳市南山区' } ] } }, methods: { handleHeaderDragEnd(newWidth, oldWidth, column, event) { const tableEl = event.target.closest('.el-table') const headerCells = tableEl.querySelectorAll('.el-table__header-wrapper th') const newColumns = [] Array.from(headerCells).forEach((cell, index) => { const prop = cell.getAttribute('data-prop') const column = this.$refs.table.store.states._columns.find(c => c.property === prop) if (column) { newColumns.push(column) } }) this.$refs.table.store.commit('setColumns', newColumns) }, handleSortChange() { // 排序后需要重新计算列的位置 this.$nextTick(() => { const headerCells = this.$el.querySelectorAll('.el-table__header-wrapper th') Array.from(headerCells).forEach((cell, index) => { cell.setAttribute('data-index', index) }) }) } } } ``` 4. 添加样式 为了让表格列能够拖拽,还需要添加一些样式: ```css .drag-table .el-table__header-wrapper th { cursor: move; } .drag-table .el-table__header-wrapper th.dragging { opacity: 0.5; } ``` 至此,我们已经完成了一个简单的可拖拽的表格。当用户拖拽表头时,表格列的位置会随之改变。需要注意的是,这个示例只实现了表头拖拽的功能,如果需要实现行拖拽的功能,可以参考 Vue 官方提供的 sortable.js 插件。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值