element UI Table组件内el-dropdown 多参数传递

Posted 2023-04-12

参考技术A el-dropdown官方使用说明就不再赘述。ElementUi官方文档中的handleCommand方法只允许接入一个参数，这个参数触发选择的是哪一个选项。但是在实际中还需要传入的对象进去，后台使用这个对象的某些字段进行一些增删改查的操作。
所以必须在执行handleCommand方法之前，对这个command参数进行重新封装成一个对象，使其内部包含我们想要的数据方便后面调用。

具体实现

参考地址

封装element-ui的table自定义表头组件

参考技术A 里面的数据没有走真实接口，是模拟的数据，但是接口是真调了，用的豆瓣的api，所以如果发现接口出错，请检查配置项。由于数据是模拟的，所以后边的请求用的都是假数据，用loading来表示走了请求，方便理解。

（1）按字段选择表格需要展示的字段
（2）自定义表头，表头支持时间，input，select，类型的搜索过滤
（3）支持操作选项，可以增删改等

（1）如果是日期范围的话，那个日期框必须的设置的大点，不然就会像效果图一样，选择的日期显示不全，虽然不是大问题，但是应该可以改进吧。其实只要把日期字段那列的宽度设置大点就可以解决这个问题。
（2）关于render函数，这块应该还可以优化，render重新渲染。

github项目地址： https://github.com/Amosyue/hyTable