博客

Vue 中绑定单独的loading

效果图

1. 需求 : 给多个按钮绑定不同的
   
loading

   的加载效果
2. 思路 : 给每一个按钮绑定不同的 自定义属性
   
data-index

   , 在点击按钮的时候获取, 之后再将当前循环的
   
index

   索引 与绑定的自定义属性比较

html 代码

使用

data-index

绑定自定义属性

scope.$index


获取到的

data-index

就是当前的索引下标

<el-table-column label="操作" fixed="right" width="150">
    <template slot-scope="scope">
        <el-button
            size="mini"
            type="primary"
            :loading="sendoneDataLoading == scope.$index"
            class="opearBtn"
        >
        <span 
        @click="handleSend(scope.$index, scope.row, $event)" 
        :data-index="scope.$index">
        	发送该数据
        </span>
        </el-button>
    </template>
</el-table-column>

js 代码


sendoneDataLoading: -1

原因是因为当前的

scope.$index = 0

如果设定了

sendoneDataLoading : 0

就会出现当页面加载完成后 第一个按钮出现

loading

加载的bug

data() {
	return {
		sendoneDataLoading: -1
	}
},
methods: {
	handleSend(index, row, e) {
       const dataIndex = e.target.getAttribute("data-index")
       this.sendoneDataLoading = dataIndex
       //发送数据请求 : {
       		// 初始化加载
       		// this.sendoneDataLoading = -1
       //}
   },
}