首页 > 其他 > 详细

推荐一个好用的行内可编辑的table组件 vxe-table

时间:2019-10-30 12:45:47      阅读:705      评论:0      收藏:0      [点我收藏+]

项目中有一个需要用户点击table单元格可编辑的需求,由于博主用的是elementUI,element组件内实现可编辑,用过的小伙伴都知道,非常麻烦,后来博主在浏览组件的时候发现了 一款非常好用的table组件 vxe-table。

  用起来非常简单只需要跟element一样指定表头数据就可以

 <vxe-table
          border
          show-overflow
          ref="xTable"
          :data="tableData"
          :edit-config="{trigger: ‘click‘, mode: ‘cell‘, showStatus: true}">
          <vxe-table-column type="checkbox" width="60"></vxe-table-column>
          <vxe-table-column type="index" width="60"></vxe-table-column>
          <vxe-table-column field="name" title="Name" :edit-render="{name: ‘input‘}"></vxe-table-column>
          <vxe-table-column field="sex" title="Sex" :edit-render="{name: ‘input‘}"></vxe-table-column>
          <vxe-table-column field="date3" title="Date" formatter="toDateString"></vxe-table-column>
          <vxe-table-column title="操作" width="200">
            <template v-slot="{ row, rowIndex }">
              <template v-if="!row.date3">
                <vxe-button @click="saveEvent2(row)" :loading="row.loading">更新并替换新数据</vxe-button>
              </template>
              <template v-else-if="rowIndex % 2 === 0">
                <vxe-button @click="saveEvent(row)" :loading="row.loading">更新行数据</vxe-button>
              </template>
              <template v-else>
                <vxe-button type="primary" @click="saveEvent(row, ‘name‘)" :loading="row.loading">更新 Name 列</vxe-button>
              </template>
            </template>
          </vxe-table-column>
        </vxe-table>
editActivedEvent ({ row, column }, event) {
              console.log(`打开 ${column.title} 列编辑`)
            },
            editClosedEvent ({ row, column }, event) {
              console.log(`关闭 ${column.title} 列编辑`)
            }

这样一个可编辑table就直接实现了 

api:https://xuliangzhan_admin.gitee.io/vxe-table/#/table/edit/click

推荐一个好用的行内可编辑的table组件 vxe-table

原文:https://www.cnblogs.com/shoucigongkai/p/11763918.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!