vxe-table在线表格的使用记录

vxe-table v3（在线编辑表格手动触发）

1.npm安装：（Vue2）

npm install xe-utils@3 vxe-table@3

2.全局引入

import Vue from 'vue'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'

Vue.use(VXETable)

3.开始使用：（下面图片的效果中我加了插入新一行、校验；以下所展示的代码并无）

 设置 edit-config={trigger: 'manual', mode: 'row'} 启用行编辑的功能

edit-config为可编辑配置项。其中showIcon：false，取消展示表格每一列的图标；autoClear：false，当用户点击非编辑行列处，对此时所编辑行列无影响。（这一个非常重要，不懂可以自己修改并尝试）

<vxe-table
            border
            resizable
            show-overflow
            ref="xTable"
            :loading="loading"
            :data="tableData"
            :edit-rules="validRules"
            :edit-config="{ trigger: 'manual', mode: 'row',showIcon: false, autoClear: false }"
            :row-config="{ isHover: true }"
            @edit-closed="updateData"
        >
            <vxe-column type="seq" width="100"></vxe-column>
            <vxe-column
                width="100"
                field="fieldName"
                title="字段名称"
                :edit-render="{}"
            >
                <template #edit="{ row }">
                    <vxe-input v-model="row.fieldName" type="text" @blur="getPinyin(row)"></vxe-input>
                </template>
            </vxe-column>
            <vxe-column width="100" field="field_code" title="字段编码" :edit-render="{}">
                <template #edit="{ row }">
                    <vxe-input v-model="row.field_code" type="text"></vxe-input>
                </template>
            </vxe-column>
            <vxe-column
                width="100"
                field="field_type"
                title="字段类型"
                :edit-render="{}"
            >
                <template #default="{ row }">
                    <span>{{ formatType(row.field_type) }}</span>
                </template>
                <template #edit="{ row }">
                    <vxe-select v-model="row.field_type" transfer>
                        <vxe-option
                            v-for="item in typeList"
                            :key="item.value"
                            :value="item.value"
                            :label="item.label"
                        ></vxe-option>
                    </vxe-select>
                </template>
            </vxe-column>
            <vxe-column
                width="100"
                field="field_length"
                title="字段长度"
                :edit-render="{}"
            >
                <template #edit="{ row }">
                    <vxe-input
                        v-model="row.field_length"
                        type="integer"
                        placeholder="请输入字段长度"
                    ></vxe-input>
                </template>
            </vxe-column>
            <vxe-column
                width="100"
                field="fractional_length"
                title="小数位数"
                :edit-render="{}"
            >
                <template #edit="{ row }">
                    <vxe-input
                        v-model="row.fractional_length"
                        type="integer"
                        placeholder="请输入小数位数"
                    ></vxe-input>
                </template>
            </vxe-column>
            <vxe-column
                width="140"
                field="required_sign"
                title="是否必填"
                :edit-render="{}"
            >
                <template #default="{ row }">
                    <span>{{ mandatoryType(row.required_sign) }}</span>
                </template>
                <template #edit="{ row }">
                    <vxe-radio-group v-model="row.required_sign">
                        <vxe-radio
                            v-for="item in mandatoryList"
                            :key="item.value"
                            :label="item.label"
                            :content="item.value"
                        ></vxe-radio>
                    </vxe-radio-group>
                </template>
            </vxe-column>
            <vxe-column
                width="140"
                field="app_sign"
                title="是否在APP显示"
                :edit-render="{}"
            >
                <template #default="{ row }">
                    <span>{{ mandatoryAppType(row.app_sign) }}</span>
                </template>
                <template #edit="{ row }">
                    <vxe-radio-group v-model="row.app_sign">
                        <vxe-radio
                            v-for="item in mandatory_appList"
                            :key="item.value"
                            :label="item.label"
                            :content="item.value"
                        ></vxe-radio>
                    </vxe-radio-group>
                </template>
            </vxe-column>
            <vxe-column
                width="140"
                field="remark"
                title="说明"
                :edit-render="{}"
            >
                <template #edit="{ row }">
                    <vxe-input v-model="row.remark" type="text"></vxe-input>
                </template>
            </vxe-column>
            <vxe-column
                width="140"
                field="dict_id"
                title="关联的字典项"
                :edit-render="{}"
            >
            </vxe-column>
            <vxe-column title="操作" width="200" fixed="right">
                <template #default="{ row }">
                    <template v-if="$refs.xTable.isActiveByRow(row)">
                        <vxe-button @click="saveRowEvent(row)">保存</vxe-button>
                        <vxe-button @click="removeRowEvent(row)"
                            >删除</vxe-button
                        >
                        <vxe-button @click="cancelRowEvent(row)"
                            >取消</vxe-button
                        >
                    </template>
                    <template v-else>
                        <vxe-button @click="editRowEvent(row)">编辑</vxe-button>
                    </template>
                </template>
            </vxe-column>
        </vxe-table>