vue+iview 动态调整Table的列顺序
需求：因table列太多，且每个部门关注的信息不一样，拖来拖去不方便观看，客户想让Table列可以拖动，且可以保存顺序。
但是搞动态拖动太难了，我不会，于是改为操作columns数据
思路：
<Table :columns="columns" :data="data1"></Table>
Table里的columns是提前在data里写好的，可以把columns对象转成json字符串存在localStorage或者数据库里，vue开始渲染页面前修改columns的值(vue生命周期)，然后再进行渲染，
客户在调整完毕后，重新渲染一下Table组件
我这里是另外写一个弹窗页modal，操作主页table的列顺序
这部分代码是主页代码，只展示了table部分，弹窗页代码在下面
orderOK方法是弹窗页完成后执行，逻辑是给columns赋值，然后改变table的key，使table重新渲染
beforeMount方法是vue生命周期，具体我也忘了，大概应该是vue编译代码生成html之前运行，读取localStorage，没有就存一个，有就用有的。
这里我只允许调整第二列以后的顺序，所以看到 i=2 不要疑惑，业务需要
data () {
return {
tabKey: 0,
tableData: [],
columns:[
{title: 'Name', key: 'name'},
{title: 'Age',key: 'age'}
]
}
}
<Table :key="tabKey" :data="tableData" :columns="columns"> </Table>
methods: {
orderOk () {
let col = JSON.parse(window.localStorage.getItem("VoyageCol"))
for (var i = 2; i < col.length; i++) {
this.columns[i] = col[i]
}
this.tabKey += 1
this.$Message.success('调整成功')
},
beforeMount () {
if (window.localStorage.getItem("VoyageCol") == null) {
window.localStorage.setItem("VoyageCol", JSON.stringify(this.columns));
} else {
let col = JSON.parse(window.localStorage.getItem("VoyageCol"))
for (var i = 2; i < col.length; i++) {//只调整第二列以后的列
this.columns[i] = col[i]
}
}
}
}
新增一个button按钮，点击出现一个弹窗modal，里面一个table，把columns传进去当做table的data
这部分代码是弹窗页代码，主要是读取localStorage给他的table当数据进行操作，排序完以后点确定再存进去，然后调用主页orderOK方法刷新主页table
//本来想自己做按钮实现上移下移，发现iview框架的Table自带draggable属性，可以实现行的上下拖动,省了无数代码
<Modal v-model="modal" title="调整列名顺序" @on-ok="orderOk">
<Table draggable :columns="columns" :data="orderData" height="460" @on-drag-drop="onDragDrop"></Table>
</Modal>
methods: {
orderOk () {
window.localStorage.setItem("VoyageCol", JSON.stringify(this.orderData));
this.$emit('orderOk')
},
onDragDrop (first, end) {
//转成int型，方便后续使用
first = parseInt(first)
end = parseInt(end)
if (first <= 1 || end <= 1) {
this.$Message.warning('前两列禁止移动')
} else {
let tmp = this.orderData[first]
if (first < end) {
for (var i = first + 1; i <= end; i++) {
this.orderData.splice(i - 1, 1, this.orderData[i])
}
this.orderData.splice(end, 1, tmp)
}
if (first > end) {
for (var i = first; i > end; i--) {
this.orderData.splice(i, 1, this.orderData[i - 1])
}
this.orderData.splice(end, 1, tmp)
}
}
}
},
mounted () {
this.orderData = JSON.parse(window.localStorage.getItem("VoyageCol"))
}
}
样式如下:
vue+iview 动态调整Table的列顺序的更多相关文章
- 调整DataTable的列顺序
地址:https://www.cnblogs.com/gaocong/p/6490159.html 标题:DataTable 修改列名 删除列 调整列顺序 DataTable myDt =dt; // ...
- vue+iview中的table表格导出excel表格
一.iveiw框架中table中有exportCsv()方法可以导出.csv后缀文件,类似于excel文件,但是并不是excel文件. 二.实现table表格导出excel文件利用Blob.js 和 ...
- vue+iview实现一行平均五列布局
iview 的栅格布局是以 html代码部分: <Row :gutter="20"> <Col style="float: left;width: 20 ...
- vue中获取滚动table的可视页面宽度，调整表头与列对齐(每列宽度不都相同)
mounted() { // 在mounted中监听表格scroll事件 this.$refs.scrollTable.addEventListener( 'scroll',(event) => ...
- Hive分区表新增字段及修改表名，列名，列注释，表注释，增加列，调整列顺序，属性名等操作
一.Hive分区表新增字段 参考博客:https://blog.csdn.net/yeweiouyang/article/details/44851459 二.Hive修改表名,列名,列注释,表注释, ...
- 使用element-ui 组件动态合并table的行/列（第二次修改）
这是第二次修改,在通过调用后台接口返回来的时候,发现了代码中的问题:现在将博客中错误的地方改过来,添加备注 文章需求:动态实现table表格中行/列的自动合并 使用框架及UI类库:Vue+Elemen ...
- DataTable 删除列 调整列顺序 修改列标题名称
DataTable dt = new DataTable(); //删除列 dt.Columns.Remove("Sex"); dt.Columns.Remove("Ag ...
- 转--DataTable 修改列名 删除列 调整列顺序
DataTable myDt =dt; //删除列 myDt.Columns.Remove("minArea"); myDt.Columns.Remove("maxAre ...
- DataTable 修改列名 删除列 调整列顺序
DataTable myDt =dt;//删除列myDt.Columns.Remove("minArea");myDt.Columns.Remove("maxArea&q ...
- DataGridView使用技巧七：列顺序的调整、操作行头列头的标题
一.列顺序的调整 设定DataGridView的AllowUserToOrderColumns为True的时候,用户可以自由调整列的顺序. 当用户改变列的顺序的时候,其本身的Index不好改变,但是D ...
随机推荐
- vue3仿windows弹窗
一款基于vue3的仿windows弹窗. 可以组件模板编写或函数式创建. 安装 npm add 'box-win' 两种方式: 1.组件式引入 //全局 test为自定义组件 import BoxWi ...
- 除select外查询数据的另一种姿势
1.24 1.[GYCTF2020]Blacklist buuctf上的题目 1.解题过程 输入1会返回一个数组,加上单引号就报错了,说明存在注入 以前做过类似的估计是堆叠注入,尝试一下 注入成功 正 ...
- 依图在实时音视频中语音处理的挑战丨RTC Dev Meetup
前言 「语音处理」是实时互动领域中非常重要的一个场景,在声网发起的「RTC Dev Meetup丨语音处理在实时互动领域的技术实践和应用」 活动中,来自百度.寰宇科技和依图的技术专家,围绕该话题进行了 ...
- 【故障公告】数据库服务器 CPU 近 100% 造成全站故障，雪上加霜难上加难的三月
数据库服务器 CPU 近 100% 问题几乎每年都要发生一次,上次发生在去年1月31日,每次都是通过主备切换或者重启实例解决,数据库服务用的是阿里云 RDS SQL Server 2016 标准版. ...
- Hive 和 Spark 分区策略剖析
作者:vivo 互联网搜索团队- Deng Jie 随着技术的不断的发展,大数据领域对于海量数据的存储和处理的技术框架越来越多.在离线数据处理生态系统最具代表性的分布式处理引擎当属Hive和Spark ...
- OpenWRT实现NAT64/DNS64
OpenWRT实现NAT64/DNS64 连接到核心路由器 # 连接到核心路由器 [C:\~]$ ssh root@10.0.0.1 Connecting to 10.0.0.1:22... Conn ...
- Kubernetes（K8S）内核优化常用参数详解
net.ipv4.tcp_keepalive_time=600 net.ipv4.tcp_keepalive_intvl=30 net.ipv4.tcp_keepalive_probes=10 net ...
- python程序，实现以管理员方式运行程序，也就是提升程序权限
quest UAC elevation from within a Python script? 我希望我的Python脚本能够在Vista上复制文件. 当我从普通的cmd.exe窗口运行它时,不会生 ...
- Golang 常用库之jwt-go
本文地址 https://www.cnblogs.com/zichliang/p/17303759.html github地址:https://github.com/dgrijalva/jwt-go ...
- JMeter-BeanShell预处理程序和BeanShell后置处理程序的应用
一.什么是BeanShell? BeanShell是用Java写成的,一个小型的.免费的.可以下载的.嵌入式的Java源代码解释器,JMeter性能测试工具也充分接纳了BeanShell解释器,封装成 ...