l_q_l的专栏

如果是只读的，使用input，且添加锁标记，否则使用下拉框。2、input里面加icon。1、文字前面加icon。

通常情况下，我们会在不同的状态下复用同一个表单，比如查看详情页和编辑页面，而不同状态下，校验规则可能有细微不同，这样，我们就需要在执行校验的时候先检查状态，不同的状态下，采用不同的规则，这就要用到动态校验。

所以，猜测可能是因为第一步删除之后Dom没有执行更新，紧接着又执行了数据的插入，等DOM更新的时候，没有检测到这一行子节点的数据变化（可能是因为值更新了其中的编号，而层级太深？），所以，就没有刷新这个子节点。但是目前看没有消失，所以猜测是删除操作未生效，于是，先把插入到新位置的第二行代码注释掉，仅执行第一步删除原节点的操作。方法修改数组），Vue并不会立即更新DOM，而是将这些更新操作放入一个队列中，在下一个事件循环中统一处理。在Vue中，数据的变化会触发视图的更新，但这个更新过程是异步的。

在Vue 2中，mixins和inject都是用于实现组件间代码复用的机制，但它们的使用场景和方式有所不同。

某页面有查看和编辑两种状态：编辑：查看：可以看到，查看时，行间距太大导致页面不紧凑，所以希望缩小查看是的行间距。行间距通常是通过 CSS 的 或 属性来控制的。在 Element UI 的样式表中， 的下边距（）通常被设置为 ，这可以视为一种“行间距”。所以要缩小行间距，就要改变这个值，但是又不希望改变编辑状态的默认值，所以，使用动态class，如下：2、动态加载class:class="formEditable?'':'el-form-item-view'" ：编辑状态下，不指定

这就导致执行第一次后，child.order的类型变成了String，这样第二次执行toFixed的时候出错。JavaScript的toFixed函数是用于将一个数字格式化为指定的小数位数的字符串。toFixed()的返回值是String，不是Number。参数是一个可选参数，默认值为0，表示不保留小数位。然而第一次执行正确，第二次执行时，提示。是需要格式化的数字，

在之前的经验中，数据通常都是从父组件通过prop单项传递给子组件，供子组件使用，但是并不修改。

如图，实现拖拽表格中的行来调整行顺序，但是其中的编号仍然是1、2、3、4的顺序，不跟着变化。

上图第三行，其实两个控件应该挨在一起的，但是每个控件都需要一个label，el-select自己无法在前面设置lable，只能通过el-form-item来设置，这样，两个el-form-item之间会有比较大的间隔，为了缩小这个间隔，我将第一个控件的size调大了一些，设为105%第一个控件放置一个el-form-item中，并设置label，第二个控件不需要label，就不需要往el-form-item中放，这样第二列就会仅挨着第一列展示，如上图第一行中的所属模块input和后面的维护模块按钮；

要实现如下图所示，将部分label的背景色设置为灰色，查了几种方式都不起作用，最后使用插槽实现，记录如下。

el-tree中，每一个节点后面添加一个按钮，响应除节点点击事件之外的操作，要求：1、按钮在鼠标悬浮在该节点之上时才出现2、按钮右对齐实现如下。

2、该值在页面挂载时获取初始值（window.innerHeight-100），这里减少100，因为窗口上面有工具栏；4、内部三个区域，分别是上中下，中间区域作为被拖动的那根线，光标悬浮其上时改变形状，在style中设置。1、最外层有一个box, 高度是屏幕高度screenHeight；3、监听窗口resize事件并实时计算高度；5、methods中添加中间区域响应鼠标事件。6、在mounted中调用。

data(){return {},},watch: {},methods: {myFunc(){//处理公用逻辑},

cols:[{label:"姓名",align:"left",prop:"name"},{label:"出生日期",align:"left",prop:"birthday", formatter:function(row, column, cellValue, index){},{label:"地址",align:"left",prop:"address"}],

需要记录某个操作的操作时间，数据库中该字段为DATE类型；插入后，数据库中：但是读取出来的日期显示为2025-01-08T00:00:00.000+08:00。

一对多查询是指一个实体对象关联多个子实体对象。比如一个订单（orders）可以有多个订单项（order_items），这是一个典型的一对多关系。在MyBatis中进行一对多查询，可以使用嵌套查询或者使用关联映射（association）和集合映射（collection）来实现。在MyBatis的映射文件中，可以使用association和collection标签来定义一对多关系的映射关系。association标签可以关联两个实体类，collection标签可以关联一个实体类和一个集合。今天实现了通过集合映

在el-table-column中定义一个作用域插槽，在作用域插槽中，可以通过scope对象来访问el-table列中的数据，并使用。想要实现的效果如图，【级别】和【P】列的颜色根据文字内容变化。根据数据的内容，使用条件判断来设置文字的颜色。绑定内联样式来设置文字颜色。3、根据字段内容设置颜色。

在中，曾创建了一个compute属性的数组来作为props传入数组对象的拷贝，在子组件中使用。但是根据项目需要，该数组对象需要支持树形数据结构，且层级不限。在使用的过程中，不仅仅会修改根节点，很多时候会对子节点进行增删改操作，而对这些子节点的数据进行操作后，就需要改变this.moduleList的地址，使它每次都是一个新的数组，否则页面无法捕获到这种更新，也就无法实时响应。但是执行时提示你想要修改一个计算属性但是没有设置setter。

table中需要加载树形数据，如图：给我一种错觉，以为数据结构中要同时指定children和hasChildren字段，然而，仔细对比官网两个例子，可知。

toggleRowSelection是Element UI中table组件的一个方法，用于切换表格行的选中状态。使用方法toggleRowSelection(row, selected)方法接受两个参数：row：被勾选行的数据。selected：设置是否选中，true为选中，false为取消选中。

reduce方法是JavaScript数组的一个内置方法，用于对数组中的每个元素执行一个由您提供的reducer函数（即累加器函数），最终将数组“减少”为单个值。reduce方法接收两个参数：一个回调函数（reducer函数）和一个可选的初始值。回调函数（reducer函数）接收四个参数：1. 累加器（accumulator）：这是累积回调函数调用的返回值的值，它是上一次回调返回的累积值，或者是提供的初始值（如果提供了的话）。2. 当前值（currentValue）：这是数组中正在处理的当前元素。

在我的项目中，需要响应用户的操作，使同一组数据随意在饼图、柱状图和折线图之间切换，所以在data中并未指定横纵坐标，只是在切换的时候，根据要切换的图表类型，动态更换图表参数后渲染。2和4中介绍了两种定位元素的方法，但是如果使用ref方式在init时出错，可尝试改用使用id的方式来定位。在data中指定图表参数，这里要注意，不同类型的图形，它们所需要的基础参数是不同的。使用setOption方法设置图表的参数，包括图表类型、数据、样式等。在饼图的基础上，柱状图和折线图还需要指定横坐标和纵坐标。

但是上一篇文中，因为要生成15组相似的table，它们的格式都一样，只是数据源不同。虽然在data中定义了数组perVersionData:[],但是冒号":"标识后面引号中的字符串是一个表达式，会计算表达式的值，将计算结果作为当前属性的值进行替换。表示属性data = perVersionData，此时perVersionData代表的已经是计算后的值，而非变量名（表达式）了。但是其实，我们是希望它进一步读取perVersionData这个变量名（表达式）的值，作为data的值。也就是说，要进一步计算。

项目中需要创建一组图表+表格的组合，一共15组，为了便于维护，希望使用v-for来创建，而不是写出15组，但是动态指定echart的ref时，频繁遭遇init失败，提示“TypeError: this.dom.getContext is not a function”。过程记录如下。

2、badge中:value="selectedRadio === item?total:''" 动态显示内容，当前按钮选中状态下才显示数字，非选中状态下置为空。1、text-color="#3785FF" fill="#E6EAF1" 处理选中时的字体颜色和背景色，如上图，分别为蓝色和浅灰色。项目中需要实现一组预定义查询，每一个查询按钮在选中时右上角显示一个角标，展示当前查询返回的数据条目。

1、template中定义事件响应函数时，指定选中项值的参数名称。如下：通过（newVal）指定参数‘newVal’为传入的选中项，那么另一个参数row即是传入的自定义参数。根据打印结果可看出，newVal是当前的选中项，而row是我当前传入的自定义参数。此时仅根据变量名称判断，变量位置可任意。比如，row和newVal的位置互换，写成。默认传入的是选中项的值（如果是多选，则传入一个数组）但是有些时候需要传入额外的自定义参数，可以通过如下方式实现。也是可以的，只要函数的实现与调用处保持一致即可。

主页面上有一个模块列表，通过列表下方的“维护”按钮，可弹出一个对话框，供用户添加、删除、编辑模块信息。

因UI调整，需要将el-tree控件更换为级联选择器，而在原树形控件中，加载了两种不同的数据结构，（参见）所以现在级联选择器中也需要加载这两种不同的数据结构。

项目中有时需要使用级联选择器，供用户从多层数据中逐级选择。官网中的示例都使用的静态数据，但是实际应用中，大部分情况是需要从后台动态获取业务数据的。所以，今天记录一下从后台获取数据进行初始化的两种方式：懒加载模式和全部加载模式及其优缺点。

而我的参数是String，所以使用的是值传递的方式，形参的变化不会影响实参，导致函数调用后，实参query并未发生改变。改用以下方式返回结果即可。可是调用结束发现query仍然是执行mappingOperator之前的值，未被mappingOperator改写。需要注意的是，虽然在引用传递中可以修改对象的属性或数组的元素，但是直接修改对象或数组的引用是不会影响到原始对象的。需要做一个查询功能，页面上有许多选项，需要根据用户的选择来进行查询语句中逻辑运算符的匹配。

综上，如果双向绑定无法实时响应：1、检查所绑定的属性在data中是否明确定义，若没有，需在data中定义；data(){return{...2、检查在使用该属性过程中，是否有删除的动作，比如对整个form进行初始化，导致其中的属性被间接删除，在此之后无法正常响应。reset(){3、检查所绑定的属性是否是对象。若是：vue2学习笔记11-深入学习监视属性并与计算属性对比_vue2 监听对象的某个属性-优快云博客。

get请求中，可以使用@pathVariable和@requestParam注解post请求中，可以使用@requestParam和@requestBody@requestParam对应前端axios的参数为params@requestBody对应前端axios的参数为data。

/前端数组字段//数据库中字段/*与前端交互时使用的get/set*/System.out.println("接收前端数据");/*与前端交互时使用的get/set*//*与数据库交互时使用的get/set*/System.out.println("从数据库中读取数据");/*与数据库交互时使用的get/set*/

在JavaScript中，几乎所有的后台接口，都是异步操作。有时候，我们需要使他们按照我们的设定顺序执行，可以使用.then方法来控制执行顺序。不推荐的原因是，实际使用时，会有一系列的逻辑处理，导致整个代码非常冗长，分区不明显。假设有三个异步操作的函数，分别是func1,func2,func3，希望的执行顺序是func1->func2->func3，那么，可以这样做（但是不推荐）。这种方式，每个函数执行完之后的需要做什么杨的数据处理，从结构上就非常清晰了，便于维护。对象，可以继续链式调用下一个。

为了避免this指向来回飘的问题，尽量使用箭头函数，而非普通匿名函数吧。

最初使用的是newArr = arr的方式，在对newArr进行了一些列的操作后，发现arr的值成员也被修改了。某select的Option需要在一个已有数组的基础上进行删减，但是原数组不能变。改为newArr = arr.slice() 正常。

/使用async，表示这是一个可以使用await控制执行顺序的同步函数//保存前的各种处理。。。。。。//阻塞，执行保存结束后，才往下走//重点：emit放到async函数里面来。走到这里的时候，上一步addUsers已经返回了},

需要在树形控件中逐级显示公司、部门以及不同部门下的项目信息。其中，公司及部门信息的结构是一致的，但是项目是另一种结构（类）。所以，树结构中需要用到两种不同结构的数据。

今天发现，某对话框打开后，其中的input无法接收键盘输入，我在页面上劈里啪啦敲了一堆，页面输入框空空如也，的确是用了v-model来实现双向绑定。那么，双向数据传输除了使用v-model之外，还有其他的条件么？我这个正好是一个form表单中的控件，绑定的是一个对象中的属性：form.projectName。但是，我写了个reset函数，其中重新定义了一个form对象，覆盖了data中的form。1、使用对form中对象属性赋值为null的方法来重置，而不是重新定义form对象。

就像我们定义一个类时，需要有set/get，定义一个方法，需要有入参和可能的返回值return一样，一个组件，也需要有输入项来支撑它的数据初始化，等它的操作完成，需要通知它的父组件进行响应。所以，我们先根据实际的业务需求，定义它的输入输出项。我这里是添加人员，根据所添加人员的角色的不同，对话框的title要发生变化，所以，至少初始化时需要传入角色、或者说title信息，另外，保存时也需要知道公司信息等。因为是对话框，我打算在父组件调用对话框，即显示（show）的时候，接收这些入参。props：...