<el-row :gutter="24">
<el-col :span="6" :key="item.id" v-for="item in storeList" style="margin-bottom:20px;">
<el-checkbox
:label="item.name"
:checked="item.checked"
@change="changeOne(item)"
border
></el-checkbox>
</el-col>
</el-row>
一、vue element ui的el-checkbox的列表选择问题
通过循环, 给数据添加checked属性,并绑定到v-model上,来实现 一的场景时候,选择操作失效。
解决方案:
1.在读取到列表后,使用map() 处理数据增加属性访问器
2. 在change事件中自定义修改 选中后逻辑
var link = url.getStore("GetAllStore");
$.get(link, params, (data) => {
_this.loading = false;
data.map((item) => {
item.checked = getIsCheck(item.id);
return item;
});
_this.storeList = data;
});
//判断是否选中
function getIsCheck(id) {
var list = _this.storeidList;
for (var i = 0; i < list.length; i++) {
var item = list[i];
if (item == id) return true;
}
return false;
}
changeOne: function (item) {
item.checked = !item.checked;
},
打印列表后:
更多:
vue : 无法加载文件 C:\Users\XXX\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本(转)
ElementUI日期组件错误, TypeError: date.getFullYear is not a function