搜锁定位到行并选中

<template>
    <div class="glczp">
        <div class="search-style">
            <el-input
                placeholder="请输入关键字"
                v-model="input"
                clearable>
            </el-input>
            <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </div>
        <div class="table-content">
            <vxe-grid
                auto-resize
                header-align="center"
                border
                :columns="tableHeader"
                :data="tableData"
                ref="x-table"

                height="auto"
                @checkbox-all="checkboxChange"
                @checkbox-change="checkboxChange"
                :loading="loading"
                show-overflow
                row-id="id"
                :checkbox-config="{checkRowKeys: defaultSelecteRows,trigger: 'row', highlight: true, range: true}"
            >
    <!--            通过设置 :scroll-y="{gt: -1}关闭虚拟滚动，则支持自动换行  否则会自动溢出省略 加show-overflow属性经过展示详情   -->
            </vxe-grid>
        </div>
        <div class="menu-btn">
            <el-button type="primary" @click="save">保存</el-button>
            <el-button @click="$emit('close')">取消</el-button>
        </div>
    </div>
</template>

<script>
import {query} from "@api/modal"

export default {
    name: "modal",
    props: {
        defaultSelecteRows: Array
    },
    data() {
        return {
            tableData: [],
            tableHeader: [
                {type: "checkbox", width: 60, title: " ", align: "center"},
                {field: "czpBh", title: "编号", width: 200, class: "czpBh"},
                {field: "czmd", title: "目的"},
            ],
            rows: [],
            loading: false,
            input: ''

        }
    },
    created() {
        this.queryList();
    },
    mounted() {},
    methods: {
        queryList() {
            this.loading = true
            query({ md: "" }).then(res => {
                this.tableData = res
                this.loading = false
            })
        },
        checkboxChange() {
            this.rows = this.$refs['x-table'].getCheckboxRecords();
        },
        save() {
            this.$emit("confirmSuccess", this.rows)
            this.$emit("close")

        },
        search() {
            let doms = this.tableData;
            let span = doms.filter(dom => dom.czpBh.indexOf(this.input) > -1)
            if (span.length == 0) {
                this.$message.warning("无匹配项")
                return
            } else {
                this.$refs['x-table'].scrollToRow(span[0])
                this.$refs["x-table"].setCheckboxRow(span[0], true)
                this.rows.push(span[0])
            }
        },
    }
};
</script>

<style lang="scss" scoped>
.glczp {
    height: 100%;
    position: relative;
    overflow-y: hidden;

    .search-style {
        display: flex;
        padding: 12px;

        ::v-deep .el-input {
            width: 260px;
            padding-right: 8px;
        }
    }
    .table-content{
        height: calc(100% - 125px);
    }

    .menu-btn {
        width: 100%;
        height: 60px;
        line-height: 60px;
        text-align: center;
        background: #ebf1fc;
        position: absolute;
        bottom: 0;
    }
}
</style>