1.问题
在使用el-select组件时，如key值设置NaN后，会导致整个页面卡死。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.9/theme-chalk/index.css">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.0-alpha.6/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.9/index.js"></script>
</head>
<body>
<div id="app">
<el-select placeholder="请选择">
<el-option
v-for="(item,i) in options"
:key="item.value"
:label="item.label"
:value="item.label">
</el-option>
</el-select>
</div>
</body>
<script>
new Vue({
el: '#app',
data: function() {
return { visible: false,
options: [{
value: NaN, //这里设置 NaN 会导致整个页面挂掉
label: '黄金糕'
},
]
}
}
})
</script>
</html>
2.官网查找
得到 sorry ，we have no plan to support this.
3.看文档描述
option 属性默认没有key属性说明
4.试试其他组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.9/theme-chalk/index.css">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.0-alpha.6/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.9/index.js"></script>
</head>
<body>
<div id="app">
<h1>el-checkbox</h1>
<el-checkbox-group v-model="checkedCities">
<el-checkbox
v-for="(item,i) in options"
:key="item.value"
:label="item.label"
:value="item.label"
></el-checkbox>
</el-checkbox-group>
<h1>el-table</h1>
<el-table
:data="options"
row-key="value" >
<el-table-column
prop="value"
label="value"
sortable
width="180">
</el-table-column>
<el-table-column
prop="label"
label="label"
sortable
width="180">
</el-table-column>
</el-table>
<h1>el-dropdown</h1>
<el-dropdown>
<span class="el-dropdown-link">
下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
v-for="(item,i) in options"
:key="item.value"
:label="item.label"
:value="item.label"
>{{item.label}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</body>
<script>
new Vue({
el: '#app',
data: function() {
return {
options: [{
value: NaN, // 这里设置 NaN 会导致整个页面挂掉
label: '黄金糕1'
},{
value: '', // 这里设置 NaN 会导致整个页面挂掉
label: '黄金糕2'
},
],
checkedCities: []
}
},
methods: {
},
})
</script>
</html>
结果没问题
