ant-design-vue中table自定义格式渲染的方法是什么

本篇内容介绍了“ant-design-vue中table自定义格式渲染的方法是什么”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！一般业务开发中，难免会遇到将一些状态值（如 0 / 1）转化为相应的描述（如 关闭 / 开启），也可能是对日期时间的格式化，如下两图转化前后对比：开始之前，需要注意的是，定义的 columns 一定要写在 data 中，否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别。有两种方式修改：对比以上，可以看出方式2代码更加简洁，且易读性更好。公司要开发一个后台管理系统，对于UI库的选择上选择了颜值爆表的Ant-Design-Vue作为整个项目UI库，但谁曾想，暗中的坑一个接一个，文档也不怎么详细，可能习惯了element-ui的掘友们也许不怎么好适应，本文就带大家一起学习如何高效使用Ant-Design-Vue。首先就来说说最常用的Form组件的正确使用姿势：先来看官方一段话述：第一、我们不推荐在Form中使用双向绑定，同一份数据可能在多处使用，如果使用双向绑免费云主机域名定，那么数据的修改会同时同步到各个组件，但这并不是我们想要的， 你应该在表单提交成功或失败或确认时同步数据，使用非双向绑定的表单，你会拥有最大限度的控制数据修改/同步的权限。第二、如果你不使用表单的自动校验/收集功能，即没有使用v-decorator修饰过的组件，你依然可以使用v-model看了官方的建议后，我们愉快的使用v-decorator修饰input组件，代码如下：划重点：v-decorator里的account可以理解为input的name值，后面{}对象可以配置校验规则，初始值等参数，这里需要注意的是使用了v-decorator的组件无法使用v-model，也无法设置value等与值有关的属性，否则报错v-decorator会自动收集你表单里的数据到form对象里，所以别忘了在data中加上这句代码：模板中这么写：如何自定义表单校验规则这里拿确认密码举例：这里我们使用validator校验器自定义函数这里需要注意callback()必须调用这里的value就是对应表单输入了的值，然后知道了这些我们就可以写我们自己的业务逻辑了做好的效果如图：表单回显我们在做编辑时首先需要通过后端接口读取到之前的数据，但是因为现在没有了v-model，那么我们该怎么办？可以调用form对象中的setFieldsValue把后端返回的对象直接设置上去，如果是在mounted方法里必须加上$nextTick，不然会抛出警告说我们在表单未渲染好之前给予了数据代码如图：图中setFieldsInitialValue是设置表单初始值，如果表单中有重置按钮，就需要设置上，重置按钮调用this.form.resetFields()就可以重置form表单了这个setFieldsValue方法会把传进去的对象的key和模板中v-decorator中的第一个参数比较，会自动把对应的值set进去。提交表单按钮加上html-type=”submit”后点击会触发这个方法，这个方法校验表单中所有必填项没有问题后会自动帮我们把表单中所有带有v-decorator修饰的组件的值和name序列化好，我们就可以直接传给后端了。我们的模板可以这么写：ant-design-vue的表格自带分页，接下来我把上图中的参数挨个解释下，columns是单元格信息，我们可以把他导出为一个数组，如下图：这里的title是用户看到的文字，dataIndex要和后台传过来的字段一致，不然数据不会显示出来，其次还提供了customRender和scopedSlots两种方式自定义内容，这里使用了第一种方式，但值得一提的是如果使用的是slot-scope方式，在模板中定义一个点击事件，想要获取到当前行的数据时，一定一定不要加dataIndex属性，否则会是undefined看一个scopedSlots使用的例子：可以看到上面定义columns时给action没有加dataIndex我们继续看dataSource是什么，他就是你给table传递的数据rowKey可以理解为时循环时需要的key(必有)pagination初始化一个空对象scroll定义表格可以横向滚动handleTableChange是当分页数据发生改变时抛出的事件为了简化操作，我这里封装了一个mixin,当页面中有table时直接混入mixin就支持分页和拉取数据的逻辑了，代码如下：flush用于标识是否是插入新数据或者删除了数据，如果是我们直接把page重置为1返回第一页我们在页面使用只需要以下几行代码：这样其他类似的组件也可以直接复用本逻辑。我们平时在后台管理系统中，ajax请求过程中都会出现全屏加载提示的遮罩层，做这个功能时我想到了这个组件，然后去官方文档查看，看到了如下图的操作方式：然后粘贴到代码中，各种操作，没有任何反应，甚至有时候还来点小报错，Spin组件肯定是引入了，反正就是最后怎么操作都没成功，无奈之下，自己用了他的样式写了个Vue的Spin插件：我们首先新建Loading.vue然后再新建Loading.js然后在main.js中然后我们就可以愉快的调用了：首先就是用官方快速上手中提供的按需加载，这里不再赘述，使用之后还存在以下问题：里面的moment.js，还有lodash，还有icon的dist居然占用了我们500KB的空间，这不能忍，那怎么办呢？我们首先忽略掉语言包,然后看看图标怎么优化：我们还需要在src文件夹下面加一个文件 icons.js我们还可以开启gzip压缩等，使用DLL优化我们的打包速度。“ant-design-vue中table自定义格式渲染的方法是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注百云主机网站，小编将为大家输出更多高质量的实用文章！

相关推荐: 如何用C语言代码实现三子棋小游戏

本文小编为大家详免费云主机域名细介绍“如何用C语言代码实现三子棋小游戏”，内容详细，步骤清晰，细节处理妥当，希望这篇“如何用C语言代码实现三子棋小游戏”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。有一个3*3的棋盘每次下棋后(电脑和…