1.el-form 的 form 数据对象新增属性不响应的解决办法

1.在 data 中将属性都提前定义好 2.构造一个新的对象，然后完全替换掉原来的 form 对象 例子：

const app = new Vue({
	el: "#app",
	data: () => {
		msg: {
			name: "jingwei";
		}
	},
	methods: {
		addProperty() {
			this.msg.age = 18; //（非响应式）
			// 原则上这是一个赋值行为，所以vue会重新收集新对象的依赖
			this.msg = Object.assign({}, this.msg, { age: 18 }); //（响应式）
		},
	},
});

3.使用$set 方法修改对象属性

2.列表展示，每一个都可以单独展开收起的效果

最简单的实现方法，给对象列表的每一个对象加一个 isShowAll 的标志量

//请求数据
res.data.forEach((item) => {
  item.isShowAll = false;
  item.rotateDeg = 135;
});
this.list = res.data;
this.doSearch();

//过滤搜索
doSearch() {
  let list = this.list.filter((item) => {
	if (
	  item.real_name.indexOf(this.userName) > -1 ||
	  item.uname.indexOf(this.userName) > -1
	) {
	  return item;
	}
  });
  this.filterList = list;
},
//点击查看更多
showInfo(index) {
  let item = this.filterList[index];
  item.isShowAll = !item.isShowAll;
  console.log(item);
  if (item.isShowAll) {
	item.rotateDeg = -45;
  } else {
	item.rotateDeg = 135;
  }
  this.$set(this.filterList, index, item); //必须使用 set 方法进行修改
},

页面：

<tr v-if="item.isShowAll">
  <td>
	<div>
	  <dl>
		<dt>局数</dt>

3.component 组件动态渲染

component 组件是 Vue.js 中用于动态渲染其他组件的特殊组件。它可以根据一个变量的值来决定渲染哪个组件，并将组件的属性、事件等动态传递给被渲染的组件。

在你提供的代码中，component 组件被使用来实现动态渲染。下面是代码的解释：

<component
	:is="item.component"
	v-bind="item.attrs"
	v-on="item.event"
	v-model="formModel[key]"
	:id="item.id"
	clearable
	v-if="!item.customContent"
	:style="item.style || 'width:158px'"
></component>

:is="item.component"：component 组件的:is 属性用于指定要动态渲染的组件。item.component 的值将决定渲染哪个组件。 v-bind="item.attrs"：v-bind 指令用于将 item.attrs 对象中的所有属性绑定到被渲染组件上。这样可以动态传递属性给被渲染的组件。 v-on="item.event"：v-on 指令用于将 item.event 对象中的所有事件绑定到被渲染组件上。这样可以动态传递事件处理函数给被渲染的组件。 v-model="formModel[key]"：v-model 指令用于在被渲染组件和 formModel[key]之间创建双向数据绑定。这样可以实现表单元素的双向数据绑定。 :id="item.id"：将 item.id 的值绑定到被渲染组件的 id 属性上。这通常用于在 JavaScript 中引用组件或设置样式。 clearable：这是一个自定义的属性，可能是针对被渲染组件的特殊功能或行为。(例如 element-ui 中有这个属性) v-if="!item.customContent"：使用 v-if 指令根据 item.customContent 的值来决定是否渲染该组件。如果 item.customContent 为假值，则不渲染组件。 :style="item.style || 'width:158px'"：:style 绑定用于设置被渲染组件的样式。item.style 的值将用作样式，如果不存在，则使用默认样式'width:158px'。 通过使用 component 组件和上述指令和绑定，可以根据 item.component 的值动态渲染不同的组件，并将属性、事件、样式等动态传递给这些组件。

注意：component 组件可以被看作是一个高阶组件（Higher-Order Component，HOC）的一种实现方式。高阶组件是一种模式，用于在 React 和 Vue 等框架中共享组件逻辑。它接收一个组件作为输入，并返回一个新的组件。 不过虽然 component 组件具有类似高阶组件的动态渲染能力，但它在 Vue.js 中并没有提供类似高阶组件的其他功能，比如对组件生命周期的直接控制、属性代理等。component 组件主要用于动态渲染其他组件，并通过指令和绑定将属性、事件等动态传递给被渲染组件，而不涉及其他高阶组件的功能。