vxe-table如何使用vxe-grid實現(xiàn)動態(tài)配置表格

更新時間：2025年04月24日 10:45:00 作者：小泡泡c

這篇文章主要介紹了vxe-table如何使用vxe-grid實現(xiàn)動態(tài)配置表格問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

一、圖1：界面效果

說明：

1）刪除：觸發(fā)函數(shù) deleteRow 刪除當(dāng)前行。
2）編輯：觸發(fā)函數(shù) editRow 將當(dāng)前行激活，界面發(fā)生變化。見圖2。

二、圖2：編輯效果

說明：

3）保存：觸發(fā)函數(shù) saveRow 保存當(dāng)前行數(shù)據(jù)。
4）取消：觸發(fā)函數(shù) cancelRow 還原當(dāng)前行數(shù)據(jù)。

三、表格配置

// 表格配置
export const colConfig = [
  {
    type:'seq', // 列的類型：seq、checkbox、radio、expand
    title:'序號',
    align:'center'
  },
  {
    title:'姓名', // 列標(biāo)題（支持開啟國際化）
    field:'name', //  列字段名（注：屬性層級越深，渲染性能就越差，例如：aa.bb.cc.dd.ee）
    align:'center', // 對齊方式
    editRender:{ // 可編輯渲染器配置項
      name:'input' // 渲染器名稱：input, textarea, select, $input, $select, $switch
    }
  },
  {
    title:'年齡',
    field:'age',
    align:'center',
    editRender:{
      name:'input'
    }
  },
  {
    title:'性別',
    field:'sex',
    align:'center',
    editRender:{
      name:'input'
    }
  }
]

// 表格數(shù)據(jù)
export const tableData = [
  {
    name:'小紅',
    age:15,
    sex:'女',
    id:1
  },
  {
    name:'小白',
    age:25,
    sex:'男',
    id:2
  },
  {
    name:'小藍(lán)',
    age:21,
    sex:'女',
    id:3
  }
]

四、代碼實現(xiàn)

<template>
  <div style="padding:100px">
    <vxe-grid
      ref="xTable"
      :max-height="450"
      v-bind="gridOptions"
      show-overflow
      keep-source
      highlight-hover-row
      highlight-current-row
      resizable
      auto-resize
      :row-config="{ isCurrent: true, isHover: true,keyField:'id' }"
      :edit-config="{trigger: 'manual', mode: 'row'}"
    >
      >
      <template #operation="{ row }">
        <vxe-button type="text" status="primary" @click="deleteRow(row)">刪除</vxe-button>
        <span v-if="$refs.xTable.isActiveByRow(row)">
          <vxe-button type="text" status="primary" @click="saveRow()">保存</vxe-button>
          <vxe-button type="text" status="primary" @click="cancelRow(row)">取消</vxe-button>
        </span>
        <span v-else>
          <vxe-button type="text" status="primary" @click="editRow(row)">編輯</vxe-button>
        </span>
      </template>
    </vxe-grid>
  </div>
</template>

<script>
import { colConfig, tableData } from './colConfig'
export default {
  data() {
    return {
      gridOptions: {
        columns: [],
        data: [],
      },
    }
  },
  created() {
    this.getTableData()
  },
  methods: {
    getTableData() {
      // 1.設(shè)置表格列
      this.gridOptions.columns = colConfig
      // 2.設(shè)置表格數(shù)據(jù)
      this.gridOptions.data = tableData
      // 3.添加操作列
      let operationCol = {
        title: '操作',
        slots: { default: 'operation' },
        align: 'center'
      }
      this.gridOptions.columns.push(operationCol)
    },
    deleteRow(row) {
      let index = this.gridOptions.data.findIndex(item => item.id === row.id)
      this.gridOptions.data.splice(index, 1)
    },
    editRow(row) {
      const $table = this.$refs.xTable
      $table.setActiveRow(row)
    },
    saveRow() {
      const $table = this.$refs.xTable
      $table.clearActived().then(() => {
        this.loading = true
        setTimeout(() => {
          this.loading = false
        }, 300)
      })
    },
    cancelRow(row) {
      const $table = this.$refs.xTable
      $table.clearActived().then(() => {
        // 還原行數(shù)據(jù)
        $table.revertData(row)
      })
    }
  }
}
</script>

官方文檔：vxe-table API