33

vxe-table 一个基于 vue 的 CRUD 表格组件,支持增删改查等功能。。。

安装
依赖: vue2.6+、xe-utils2.4+

npm install vue xe-utils vxe-table

1737546149-5e3ece3b35aac_articlex.gif

一个简单的使用例子:

<template>
  <div>
    <vxe-table
      border
      show-overflow
      :edit-config="{trigger: 'click', mode: 'cell'}"
      :data="tableData">
      <vxe-column type="seq" width="60"></vxe-column>
      <vxe-column field="name" title="Name" :edit-render="{name: 'input'}"></vxe-column>
      <vxe-column field="date" title="Date" :edit-render="{name: 'input'}"></vxe-column>
      <vxe-column field="sex" title="Sex" :edit-render="{name: 'input'}"></vxe-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        { id: 10001, name: 'test1', sex: 'Man', date: '2019-05-01' }
      ]
    }
  }
}
</script>

abc26296
172 声望24 粉丝