记一次 Element Table 组件单独为每一行设置控件类型事件

121 阅读2分钟

经理:小路,你封装的表格功能很不错,每一列都可以根据配置渲染成对应的控件类型,但是嘛...

我:(心里咯噔一下)

经理:但是,你现在的表格所有的格子的配置只要属于一列,那么包括控件类型在内的所有配置都是一样的,试想一种场景,你的表格存的是学校人员信息,假设有职位和人员两列,人员所在列的配置肯定都是一样的,但是假如我们需要针对职位选择后,对人员的配置修改,那么要怎么实现呢,是每改一次,就去修改整个列的配置吗?

我:懵逼中...

经理:知道你懵逼,这个需求就是人员的格子里面有个放大镜,点击弹出一个表格,但是弹出的内容要根据职位所选的不同来决定。当然,这个需求不足以体现这个,以后可能会让整个人员格子的渲染都依赖于职位,选老师就成下拉控件,选学生就弹窗。

我:这么牛掰!

经理:对呀,有思路没有?

我:我认为应该监听表格值改变事件,然后获取变化所在行,调用方法修改格子状态。

经理:可以是可以,但是假如页面刚进来,没有点击行也没有触发行选中事件呢,那么这个时候控件类型怎么确定呢?

我:这个情况是不存在的吧,哪有不编辑就渲染控件的?

经理:谁说不存在的,我说会有就一定会有。

我;好吧,那么这个时候我们就不应该采用让组件被动地执行我们所写的方法这种思路了,应该赋予表格每个格子自己的智能,在创建它们的时候赋予它们智能,并且让它们和别的变量(特指可 vue 双向绑定的变量)建立羁绊,绑定这个羁绊,绑定羁绊的过程也就是编写业务代码的过程。

经理:好了,你这个就是那个什么,那个人工智能表格对吧?

我:...