(vue)IView表格操作列中点击当前行按钮图标切换其它行图标不变

nyf_unknown

已于 2022-08-04 11:13:13 修改

阅读量466

点赞数 1

分类专栏： VUE 文章标签： vue.js view design javascript

于 2022-08-03 18:45:41 首次发布

本文链接：https://blog.csdn.net/qq_44754635/article/details/126146620

版权

VUE 专栏收录该内容

181 篇文章 2 订阅

订阅专栏

(vue)IView表格中点击当前行按钮图标切换其它行图标不变

效果：
在这里插入图片描述

html：

<Table
   ref="selection"
   :columns="columns"
   :data="tableData"
   @on-selection-change="handleSelectChange"
 >
   <template slot-scope="{ row, index }" slot="operation">
     <span
       type="text"
       size="small"
       v-if="play && activeIndex == index" //重点
       @click="saveRow(row, index)"
       >保存</span
     >
     <span type="text" size="small" v-else @click="editRow(row, index)"
       >编辑</span
     >
     <span type="text" size="small" @click="deleteRow(row)">删除</span>
   </template>
 </Table>

js:

data(){
	play: false, //判断依据来显示或者隐藏
    activeIndex: 0, //索引值,把当前行的index值等于activeIndex可以知道操作的是哪一行的数据
}

methods:{
	//编辑
    editRow(row, index) {
      this.activeIndex = index;
      this.play = true;
    },
    //保存
    saveRow(row, index) {
      this.play = false;
    },
}