最近做的项目的一个小功能表格图标切换功能;
下面是功能实例讲解希望可以帮助到不理解的朋友
1.表格列表点击当前行改变当前行的按钮状态,其他按钮不变(如图)
2.HTML部分
首先这是基于vue-element-ui框架开发的项目 红线部分就是重点按钮的布局;
声明一个变量(这里是play变量)作为v-if的判断依据来显示或者隐藏图标,默认情况下play都是初始化为false
其次再声明一个变量索引值(这里是activeIndex),然后把当前行的index值等于activeIndex可以知道操作的是哪一行的数据,
还有一点就是默认play为false;所以表格的按钮应该是播放按钮,所以要在暂停按钮上加怕判断条件,暂停的状态为false,所以会显示播放的按钮,这点需要有点不明白的要仔细思考下;
3.下面就是点击时的切换判断
播放状态时:
暂停状态时:
说的不妥之处欢迎大家指正