【Web前端】vxe-table组件之实践运用

前言

vxe-table组件是小弟在开发时，遇到的比较有趣、且实用的nice组件哦。
刚开始接触时还比较头疼，可是后面发现竟如此funny呢。

下面附上api文档哟：

https://xuliangzhan_admin.gitee.io/vxe-table/#/table/start/install

事情是这样的，我遇到了一个需求：大致内容是这样的，对移动端底导航进行配置，然后将数据保存在pc端，并通过如下表格保存。

刚开始接触，“这是咩呀”。后来在大佬的指引下我找到了今天的主角 —— vxe-table。

第一步：试着分析一下这个表格：

第一列：input输入框
第二列：radio单选框
第三列：switch开关按钮
第四列：select下拉框
第五六列：icon图标，并带有点击上传事件
第七列：排序

第二步：查阅api文档

找到关键字“编辑”，发现了如下

这不正是我们第一列需要的效果吗，点击文字，出现input输入框。不错子

第三步： 实践

第一列：

现在我门面临一个问题：如何触发修改事件；
细心的xpy已经发现了api文档中的一丝线索，组件库当然有内置的规则让你遵从

在vxe-table标签中加入该属性——意为如何触发修改数据事件

:edit-config="{trigger: 'click', mode: 'row', showIcon: false, autoClear: false}"

在vxe-table-column中加入该属性——意为修改形式，这里给出的是input输入框

:edit-render="{ name: 'input', attrs: { type: 'text' } }"

当我们走到这里，其实已经完成了第一个功能，点击名称出现input输入框，进行修改。

第二列：

不难发现这是一个单选框组件
这里关系到的属性/方法有以下：
vxe-table：@radio-change
vxe-table-column：type=“radio”

这些属性/方法均可在文档中查询到。

第三列：

这里是每一行都有一个开关组件。
vxe-column：:cell-render="{ name: ‘$switch’ }"

第四列：

这里是一个select下拉选择框
此时，我们可以用到

<template #default="{ row }">
	<el-select>
		....
	</el-select>
</template>

这里我们用到内置《集成第三方库》

第五、六列：

于第四列相同的方法
不同的是，select下拉框换成了icon图标

第七列：

具体参照

<!-- 排序 -->
 <vxe-table-column
  key="sort"
  width="100"
  align="center"
  :title="this.$t('mobileCenter.bottomNavSet.saveDialog.colConfigs.sort')"
  field="sort"
>
   <template #default>
       <span class="drag-btn">
         <i class="vxe-icon--menu" />
       </span>
   </template>
</vxe-table-column>

友友们，有帮助嘛。

---

总结：组件的api文档真的能解决95%的问题！不懂的地方一定要反复阅读。