推薦一個好用的行內可編輯的table組件 vxe-table

項目中有一個須要用戶點擊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