码迷,mamicode.com
首页 > 其他好文 > 详细

element-ui 复选框,实现点击表格当前行选中或取消

时间:2019-08-08 17:29:07      阅读:2915      评论:0      收藏:0      [点我收藏+]

标签:cli   com   template   bsp   src   http   定义   点击   data   

背景:

技术图片

1.表格结构绑定事件

技术图片

<el-table
              v-loading="StepsListLoading"
              :data="StepsListData"
              border
              @row-click="StepsListRowClick"
              :show-header="hiddenTableHeader"
            >

2.定义复选框结构

技术图片

<el-table-column>
                <template slot-scope="scope">
                  <el-checkbox v-model="StepsListData[scope.$index].tick">{{StepsListData[scope.$index].checkName}}</el-checkbox>
                </template>
              </el-table-column>

数组结构

技术图片

3.定义事件,实现当前表格行点击以后复选框被选中,再点击一次的时候,复选框被取消

技术图片

StepsListRowClick(row){
        if(row.tick == false){
          row.tick = true
        }else {
          row.tick = false
        }
      },

 

element-ui 复选框,实现点击表格当前行选中或取消

标签:cli   com   template   bsp   src   http   定义   点击   data   

原文地址:https://www.cnblogs.com/wuhefeng/p/11322448.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!