| 项目上有一个表格需要实现在线编辑，开始用了 element 的el-table 实现，单元格内基础情况就是监听了单击单元格切换一个span标签与input标签，复杂点的单元格使用了大量的条件判断来实现对应的编辑操作，比如下拉选，popover弹框编辑。整个表格几十列，十几条数据就已经出现了明显的卡顿，在做了诸多操作（比如el-input使用原生input替换、减少判断、减少频繁的数据切换等）之后，速度虽然有所提升，但是还是肉眼可见的卡顿，基本不可用。然后便转战vxe-table，重写了一遍这个表格。 （别问我为什么不直接用更好的vxe-table，正经人写代码谁会首先想到重构而不是试试优化呢。。。） 下面记录一下使用过程。 1. 全局安装 npm install xe-utils@3 vxe-table@3 main.js 中引入 import 'xe-utils';import VXETable from 'vxe-table';import 'vxe-table/lib/style.css';Vue.use(VXETable); 其实它可以按需加载来减少项目体积，但是我觉得有点麻烦就没弄，想要了解可以点击下面链接查看~ vue-table 按需加载 2. 基础用法 <template> <vxe-table :align="allAlign" :data="tableData"> <vxe-table-column type="seq" width="60"></vxe-table-column> <vxe-table-column field="name" title="名称"></vxe-table-column> <vxe-table-column field="desc" title="描述"></vxe-table-column> <vxe-table-column field="link" title="链接"></vxe-table-column> </vxe-table></template><script> export default { data () { return { allAlign: null, tableData: [ { name: "html", desc: '超文本标记语言', link: 'https://www.runoob.com/html/html-tutorial.html' }, { name: "css", desc: '层叠样式表', link: 'https://www.runoob.com/css/css-intro.html' }, { name: "js", desc: 'JavaScript', link: 'https://www.runoob.com/js/js-tutorial.html' } ] } } }</script>以上，即可实现一个基础表格，但是现在仅仅是表格展示，实现编辑还需要另外的配置。 
3. 实现编辑 <template> <!--表格添加edit-config配置--> <vxe-table border :data="tableData" :edit-config="{trigger: 'click', mode: 'cell'}"> <!--对单元格vxe-table-column进行改造，使用edit-render来配置编辑属性---> <vxe-table-column title="描述" width="180" fixed="left" field="desc" :edit-render="{name: 'input', attrs: {type: 'text'}}"> </vxe-table-column> </vxe-table></template>
具体配置可以查看 api 3. 实现下拉选择 <template> <vxe-table border :data="tableData" :edit-config="{trigger: 'click', mode: 'cell'}"> <!--和输入框编辑区别仅在于edit-render的配置不同，data中新增选项selection---> <vxe-table-column title="是否展示" width="180" field="isShow" :edit-render="{name: 'select', options: selection, optionProps: {value: 'status', label: 'label'}}"> </vxe-table-column> </vxe-table></template><script> export default { data () { return { allAlign: null, tableData: [ { name: "html", desc: '超文本标记语言', link: 'https://www.runoob.com/html/html-tutorial.html', isShow: 1 } // 省略一下多条数据
利用Vue3实现一个可以用js调用的组件
JavaScript实现更换头像功能 |
