<el-table-column
label="是否选中"
width="55">
<template scope="scope">
<el-checkbox v-model="scope.row.checked"></el-checkbox>
</template>
</el-table-column>
效果左边的是第一种方式,右边的是第二种方式第一种方式直接指定type为selection,并且在table标签中指定处理方法,即@selection-change="handleSelectionChange" <el-table-column type = 'selection' label="是否选中" width="55"></el-table-column> handleSelectionChange:func
nested_el-checkbox
element-ui的el-checkbox实现嵌套多选,单选
tips:chrome获取本地json数据时会产生跨域问题,建议用firefox直接打开
主要功能:
实现多选框层级嵌套
当选中一个二级子菜单的时候,其对应的上级菜单也选中
若二级子菜单无一个选中,则对应的一级菜单也不是选中状态
当一级菜单发生点击事件时,若原本为选中状态,则取消选中,若该菜单下有二级子菜单,所有子菜单也取消选中状态;若原本为未选中状态,则改为选中状态,若该菜单下有二级子菜单,所有子菜单也改为选中状态。
实现已有的选择记录的复现。
1.data数据
data() {
return {
menu: [] //所有的菜单数组,
menusIds: [] //已选的菜单id数组
2.html部分
要实现一个嵌套的效果,每一个一级菜单应该
el-table嵌套表单元素时,表单元素失效,也就是输入和点击无效时,是因为数据更新失效、试图更新失效。
原因可能是因为加入了新的对象属性,或者数据层级太深,官网有提到前面的情况,新加入的对象属性变更不会带来试图更新。
解决办法就是在表单元素上加入change方法:
<el-table-column label="见面">
<template slot-scope="scope">
<el-radio-group v-model="scope.row.se
element-ui el-table 数据变化时表格出现抖动
项目有个需求,有一个表格是通过改造el-table来适应需求,表格的head和body数据都是通过v-for渲染遍历生成的,通过多选框Checkbox来勾选表格头部需要展示的数据,进行切换到时候表格出现抖动不美观。
部分原代码:
<el-table :data="tableData" border class="spec-table">
<el-table-column v-for="(item,index) in