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

摘要:
背景:1.表结构绑定事件<el tablev loading=“StepsListLoading”:data=“Steps ListData”border@row-click=“StepsListRowClick”:show header=“hidden TableHeader”˃2.定义复选框结构{StepsListData[sope.$index].checkName}}数组结构3.定义事件以在单击当前表行后选中复选框,然后再次单击当,复选框被取消StepsListRowClick{if{row.tick=true}否则{row.tick=false}}。检查时,发现这将导致原始复选框的检查事件无效。原因是表行事件和复选框事件的内容执行一次,因此解决方案是删除表行事件并保留复选框的原始事件。为了实现单击此行中的任何位置都可以选择或取消选择的效果,可以使用css的padding属性填充整行

背景:

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

1.表格结构绑定事件

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

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

2.定义复选框结构

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

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

数组结构

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

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

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

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

检查的时候发现,这样会导致原有复选框的勾选事件失效,原因是表格行事件的内容与复选框事件的内容都执行了一次,所以就失效了

解决办法是去掉表格行事件,保留复选框原有的事件,为了实现点击这一行的任意位置都可以选中与取消选中的效果,可以使用css的padding属性把这一整行都占满

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

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

免责声明:文章转载自《element-ui 复选框,实现点击表格当前行选中或取消》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇gin连接mysql数据库给hive的metastore做JVM优化下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

实现checkbox全选、非全选、单选

全局选择与单选有以下两点关系: 1、当我把所有单选都选择上的时候,全选应该是被选择状态 2、当我取消一个单选时,全选应该是取消的状态 如果不存在全局选择与单选之间的关系,则会出现如下两图情况: 代码实现:(为了更清晰方便,所以只有复选框,可以根据自己需要进行修改) <div> <ul> <li>...

EasyUi datagrid列表增加复选框

本文为博主原创,未经允许不得转载 1.增加复选框列 { field: 'oid', title: '<input type="checkbox" name="selectRadioList" checked= true onchange="selectAll()"/>', 28, formatter: function(val...

el-table表格树状图复选框全选问题

应用场景 表格数据有层级关系,需要用到表格的树状图结构!!!,同时,可全选表格数据,跟全勾选子节点数据,效果如下 实现方法 根据element官网实现,实现完,发现树形表格加复选框后,子结构无法选中的问题。于是在table上监听点击和全选,根据数据有子节点来手动切换选中与否。 解决方法如下: template如下: <el-table ref=...

复选框QCheckBox

复选框一共有三种状态:全选中、半选中和无选中。若一个父选项的子选项全部为选中状态,则该父选项为全选中;若子选项全部为无选中状态,则该父选项为无选中状态;若子选项既有全选中和无选中状态,则该父选项为半选中状态 importsys from PyQt5.QtCore importQt from PyQt5.QtWidgets importQApplica...

C#后台实现在Grid标签中动态新增CheckBox标签(WPF中)

页面代码 1 <Grid Margin="45,0,10,0" > 2 <Grid.RowDefinitions> 3 <RowDefinition Height="*"/> 4 <RowDef...

DataGridView复选框实现全选功能,并取被选中的某行某列的值(三)

目标: 一、选中全选这个复选框,会选中第一列所有的复选框  拉过来一个CheckBox控件(CheckBox1)覆盖在第一列的标题上,文本值:全选 方法:双击上面拉的CheckBox控件,进入其事件 private void checkBox1_CheckedChanged(object sender, EventArgs e) {...