zoukankan      html  css  js  c++  java
  • ElementUI实现表格(table) 行上下移动的效果

    参考地址
    https://blog.csdn.net/sunshine0508/article/details/88390155
    看大佬的地址

    <div id="app">
    		<el-table :data="URLModles" :show-header="false" highlight-current-row style=" 100%"
    			@selection-change="handleSelectionChange">
    			<el-table-column type="selection" width="55px">
    			</el-table-column>
    			<el-table-column type="index" width="55px">
    			</el-table-column>
    			<el-table-column prop="expressCode" label="快递代码" width="100px">
    			</el-table-column>
    			<el-table-column prop="expressName" label="快递名称" width="100px">
    			</el-table-column>
    			<el-table-column label="操作">
    				<template slot-scope="scope">
    					<el-button size="mini" :disabled="scope.$index===0" @click="moveUp(scope.$index,scope.row)"><i
    							class="el-icon-arrow-up"></i></el-button>
    					<el-button size="mini" :disabled="scope.$index===(URLModles.length-1)"
    						@click="moveDown(scope.$index,scope.row)"><i class="el-icon-arrow-down"></i></el-button>
    					<el-button type="info" size="mini" round v-if="scope.$index===0">默认</el-button>
    				</template>
    
    			</el-table-column>
    		</el-table>
    	</div>
    
    	var vm = new Vue({
    		el: "#app",
    
    		data() {
    			return {
    				URLModles: [{
    					index: '1',
    					expressCode: 'SF',
    					expressName: '顺丰快递',
    					status: true,
    				}, {
    					index: '2',
    					expressCode: 'YTO',
    					expressName: '圆通快递',
    					status: true,
    				}, {
    					index: '3',
    					expressCode: 'UC',
    					expressName: '优速快递',
    					status: true,
    				}],
    				multipleSelection: []
    			}
    		},
    
    		methods: {
    			//选择复选框数据
    			handleSelectionChange(val) {
    				this.multipleSelection = val;
    			},
    
    			//上移
    			moveUp(index, row) {
    				var that = this;
    				console.log('上移', index, row);
    				console.log(that.URLModles[index]);
    				if (index > 0) {
    					let upDate = that.URLModles[index - 1];
    					that.URLModles.splice(index - 1, 1);
    					that.URLModles.splice(index, 0, upDate);
    				} else {
    					alert('已经是第一条,不可上移');
    				}
    			},
    
    			//下移
    			moveDown(index, row) {
    				var that = this;
    				console.log('下移', index, row);
    				if ((index + 1) === that.URLModles.length) {
    					alert('已经是最后一条,不可下移');
    				} else {
    					console.log(index);
    					// 保存下一条数据
    					let downDate = that.URLModles[index + 1];
    					// 删除下一条数据
    					that.URLModles.splice(index + 1, 1);
    					// 增添被删除的那一条数据
    					that.URLModles.splice(index, 0, downDate);
    				}
    			}
    		}
    
    	})
    </script>
    

  • 相关阅读:
    Scrapy框架基础使用
    python爬虫练习--爬取今日头条街拍图片
    python爬虫练习--爬取所有微博
    python爬虫练习--爬取猫眼热映口碑榜
    python练习---校园管理系统
    python爬虫练习--爬取猫眼top100电影信息
    基础篇-Python的urllib库
    1--爬虫环境安装篇
    Confluence 如何查看页面 ID
    导入 Gradle 项目到 IntelliJ IDEA
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/12609563.html
Copyright © 2011-2022 走看看