heirui的专栏

点击组件的 加 减 按钮时，发现数据无法更新，或者无法正常更新，每次只能点一两下，然后数值就不动了，而且它居然 还能影响其他行的组件。经测试问题也可以完美解决，不需要key/row-key设置，表格中prop、v-model也都正常操作就可以了。然后博主提供的解决方案是通过添加key属性来解决，我没试，我直接从数据源那里解决。说这个问题是因为“绑定的数据未刷新是vue的绑定深度过多，没有关联绑定起来”在cdsn看了一些相关文章，最后在这里看到一句话，

注意，userList 是保存的用户列表数据，如果不把userList放进form里，而是直接定义一个单独的变量，那么你可以洗洗睡了，因为你再怎么折腾，也是不可能成功的，因为逻辑上讲不通！这类代码网上很多，只是没有人详细讲解其中的细节和关键点，所以很多人把代码拿过去就不好使，我就是其中之一，所以要记录一下。要做表单验证，首先得有表单，然后表单里面有待验证的元素，这样表单验证才能正常工作，逻辑上也能讲的通。而如果我把userList单独 拿出来定义成一个独立的变量，那它与form表单就没有一毛钱关系了。

因为这些字段并不是在任何循环中，所以这里的key直接用了一个随机数，这样修改过以后，blur事件就可以正常激活表单的验证了，不然就会发生鼠标点击并离开输入框时，无法进行验证的问题。

但如果只是这样做的话，label前面没有红色的星号，我看到很多人都是直接这样用的，但我比较执拗，查了一下elementUI文档，发现el-form-item标签有一个required属性，试了一下果然可以显示一个红色的星号，至此问题完美解决。严格来讲，使用el-form-item时，是无法使用prop绑定多个字段，但业务中的需求是各式各样的，总会遇到这种情况，那就要想办法去实现它，毕竟东西是死人，我们人，是活的，要活学活用。上图中省市区联动，还有经纬度，都是需要在同一行内，显示多个控件，并绑定多个字段的。

el-table表格中多列使用el-switch开关时的冲突解决

<template> <el-table ref="multipleTable" :data="tableData" @row-click="handleRowChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column prop="name" .

修改文件：require-table.js修改代码：classname = j.classname ? j.classname : 'btn-primary btn-' + name + 'one';替换为：classname = typeof j.classname === 'function' ? j.classname.call(table, row, j) : j.classname ? j.classname : 'btn-primary btn-' + name +