有使用 Vue + iView 的朋友吗？请问 Table 组件要怎么使用 filter

Posted 2023-04-02

参考技术A 按官方教程，Table 只有一个 <Table> 表情，数据填充并不是写在 html 中的，定义数据的对应关系也是放在 js 的 columns 里面。
试过 columns 里面重写 render 函数 return ' data | filter' 是没效果的，我想把时间戳格式化为字符串，要怎么弄… 参考技术B 可以将filter文件里面的时间过滤方法直接引入需要过滤的vue文件，即：import dateFilter from '../../util/filter'，然后在columns里面使用render，例如
render: (h, params) =>
return h('span',
dateFilter(params.row.createTime, 3)
)

这样直接将数据进行过滤即可

iview-form内table修改字段效验

参考技术A 场景：使用iview-ui，form表单内嵌table支持编辑，对某个字段进行单独效验

页面中form表单中包含的table，table的columns使用render函数进行渲染，本身form表单有多条数据进行效验，编辑表格内容时单独对某个input框进行效验。
将表格内效验的条件也写在form的rules 内，表格render函数渲染input时，使用form-item包裹，并填写prop，作为表单中的一项可调用效验，需在data中提前声明。(注意：同时效验多行同一个字段可能会出错)

在table新增时先对form 内容进行部分效验
this.$refs['formValidate'].validate((valid) => )
table 编辑 input 失去焦点时再次触发form表单效验

日常记录，有错误or优化，请指出不胜感谢！