element-ui 復選框,實現點擊表格當前行選中或取消

背景:

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
        }
      },

 

檢查的時候發現，這樣會導致原有復選框的勾選事件失效，原因是表格行事件的內容與復選框事件的內容都執行了一次，所以就失效了

解決辦法是去掉表格行事件，保留復選框原有的事件，為了實現點擊這一行的任意位置都可以選中與取消選中的效果，可以使用css的padding屬性把這一整行都占滿