• 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>
    

  • 相关阅读:
    集群服务器登录退出出现问题
    TP框架中的Db::name 和 dB::table 以及 db('') 的区别
    TP5中orderRaw用法
    视差滚动 插件
    ThinkPad t480s 电源接口进水了
    file_put_contents failed to open stream: Permission denied in
    Mac 如何安装字体?
    ZipArchive::close(): Failure to create temporary file: Permission denied
    Wifi6 路由器推荐
    名词解释 | Enteric Nervous System | Enteric Neural Crest Cell | ENS | ENCC | 神经系统 | 神经嵴细胞
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/12609563.html
Copyright © 2020-2023  润新知