vxe-table动态新增及复制行

最新推荐文章于 2025-05-14 07:46:31 发布

小破孩呦

最新推荐文章于 2025-05-14 07:46:31 发布

阅读量273

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_38543537/article/details/147447593

            <div class="but-grout">
                <el-button  @click="insertEvent(-1)" type="primary">新增</el-button> 
                <el-button  @click="deleteAllBtn()" type="danger">批量删除</el-button> 
            </div> 
            <vxe-table resizable ref="xTable" border show-overflow highlight-hover-row :data="tableData" @cell-click="cellClickEvent"
            @checkbox-all="selectAllEvent" @checkbox-change="selectChangeEvent" :edit-config="{trigger: 'click', mode: 'cell'}"
            :edit-rules="validRules" :row-key="true" :row-id="'rowId'">
                <vxe-table-column type="checkbox" fixed="left" width="60"></vxe-table-column>
                <vxe-table-column type="seq" title="序号" fixed="left" width="60"></vxe-table-column>
                <vxe-table-column field="projectTypeId" title="项目号类型" min-width="120" :edit-render="{}">
                    <template #default="{ row }">
                        <div v-for="item in options1" :key="item.id">
                            <span v-if="row.projectTypeId === item.id">{{ item.templateName }}</span>
                        </div>
                    </template>
                    <template #edit="{ row }">
                        <el-select v-model="row.projectTypeId" @change="onChange1" filterable style="min-width:100px">
                            <el-option v-for="item in options1" :key="item.id" :label="item.templateName" :value="item.id" :disabled="item.isSameAsAbove"></el-option>
                        </el-select>
                    </template>
                </vxe-table-column>
                <vxe-table-column field="projectId" title="项目号" min-width="120" :edit-render="{type: 'default'}">
                    <template #default="{ row }">
                        <div v-for="item in options2All" :key="item.id">
                            <span v-if="row.projectId == item.id">{{ item.projectName }}</span>
                        </div>
                    </template>
                    <template #edit="{ row }">
                        <el-select v-model="row.projectId" @change="onChange2" filterable :disabled="isSelect2"
                        value-key="id" style="min-width:100px">
                            <el-option v-for="item in options2" :key="item.id" :label="item.projectName" :value="item"></el-option>
                        </el-select>
                    </template>
                </vxe-table-column>
                <vxe-table-column field="projectId" title="项目号编码" min-width="120" :edit-render="{type: 'default'}">
                    <template #default="{ row }">
                        <div v-for="item in options2All" :key="item.id">
                            <span v-if="row.projectId === item.id">{{ item.projectCode }}</span>
                        </div>
                    </template>
                    <template #edit="{ row }">
                        <el-select v-model="row.projectId" @change="onChange2" filterable :disabled="isSelect2" 
                        value-key="id" style="min-width:100px">
                            <el-option v-for="item in options2" :key="item.id" :label="item.projectCode" :value="item"></el-option>
                        </el-select>
                    </template>
                </vxe-table-column>
                <vxe-table-column field="workPercent" title="用时占比%" min-width="120" :edit-render="{type: 'default'}">
                    <!-- <template v-slot:edit="scope">
                        <el-input v-model="scope.row.workPercent" style="min-width:100px"></el-input>
                    </template> -->
                    <template #edit="{ row }">
                        <el-input v-model="row.workPercent" style="min-width:100px"></el-input>
                    </template>
                </vxe-table-column>
                <vxe-table-column field="id" title="操作" width="80" fixed="right" align="center">
                    <template v-slot:default="{ row, rowIndex }">
                        <el-button size="mini" @click="copyBtn(row,rowIndex)" type="text">复制</el-button>
                    </template>
                </vxe-table-column>
            </vxe-table>
            <div style="text-align: center;margin-top:30px">
                <el-button @click="closeBtn()">取消</el-button>
                <el-button type="primary" @click="okBtn()" :loading="loadingBtn">确定</el-button>
            </div>

<script>
export default {
    data() {
        return {
            tableData: [],
            rowVal: {},
            selectList: [],
            options1: [],
            options2: [],
            options2All: [],
            isSelect2: true,
            isSelect3: true,
            isSelect4: true,
            isSelect5: true,
            loadingBtn: false,
            projectIdVal: '',
            validRules: {
                projectTypeId: [
                    { required: true, message: '请选择项目号类型' },
                ],
                projectId: [
                    { required: true, message: '请选择项目号' },
                ],
                workPercent: [
                    { required: true, message: '请填写用时占比' },
                ],
            },
        }
    },
    created(){
        
    },
    methods: {
        // 单选
        selectChangeEvent ({ records }) {
            this.selectList = records
        },   
        // 全选
        selectAllEvent ({ records }) {
            this.selectList = records
        },
        // 新增表格行
        async insertEvent (row) {
            const $table = this.$refs.xTable;
            const rid = Date.now(); // 设置一个动态的行id
            const record = {
                rowId: rid,
            }// 可配置默认值
            const { row: newRow } = await $table.insertAt(record, row)
            await $table.setActiveCell(newRow)
            // await $table.setActiveRow(newRow)
        },
        // 删除选中行
        deleteAllBtn(){
            const $table = this.$refs.xTable;
            if(this.selectList.length === 0){
                this.$message.warning('请选择需要删除的数据！');
                return
            }
            if ($table) {
                $table.removeCheckboxRow()
            }
        },
        // 复制
        async copyBtn(row,rowIndex){
            const $table = this.$refs.xTable
            const errMap = await $table.validate(row).catch(errMap => errMap)
            if (errMap) {
                this.$message.warning('请将数据填写完整后再进行复制！');
            } else {
                const newRow = JSON.parse(JSON.stringify(row))
                const rid = Date.now(); // 设置一个新的动态行id
                newRow.rowId = rid;
                // 使用 vxe-table 的 insertAt 方法
                $table.insertAt(newRow, rowIndex + 1).then(() => {
                    this.$message.success('复制成功！');
                    console.log(this.tableData, 'this.tableData');
                });
                console.log(this.tableData,'this.tableData');
            }
        },
        // 行点击事件
        cellClickEvent({row,rowIndex}){
            this.$nextTick(() => {
                this.rowVal = deepClone(row);
            })
        },
        onChange1(val){
            this.$nextTick(() => {
                const list = this.$refs.xTable.tableData;
                list.map((item) => {
                    if(item.rowId === this.rowVal.rowId){
                        item.projectId = null;
                        item.workPercent = null;
                        item.postId = null;
                        item.taskStage = null;
                        item.taskId = null;
                        item.subTaskName = null;
                        item.demandDept = null;
                    }
                })
                this.isSelect2 = false;
                this.isSelect3 = true;
                this.isSelect4 = true;
            })
        },
        onChange2(val){
            const list = this.$refs.xTable.tableData;
            list.map((item) => {
                if(item.rowId === this.rowVal.rowId){
                    item.projectId = val.id;
                    item.rdProjectCode = val.rdProjectCode;
                    item.projectName = val.projectName;
                    item.projectCode = val.projectCode;
                }
            })
            this.isSelect5 = false;
            this.isSelect3 = true;
            this.isSelect4 = true;
        },
        closeBtn(){
            
        },
        async okBtn(){
            const $table = this.$refs.xTable
            const errMap = await $table.validate().catch(errMap => errMap)
            if (errMap) {
                this.$message.warning('请完整填写数据');
            } else {
                const list = this.$refs.xTable.tableData;
                if(list.length === 0){
                    this.$message.warning('请填写任务后再提交！');
                    return
                }
                this.$confirm(' 是否确认提交数据?', '提示', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loadingBtn = true;
                    console.log(list,'数据');
                })
            }
        },
    }
}
</script>