表格行新增雙擊事件

阿新 • • 發佈：2022-05-08

需求: 檔案管理功能，類似與windows 的檔案及資料夾操作

如下圖：

雙擊是實現：

　　1、主要依靠 mounted() 中 this.$nextTick, 渲染後掛載事件

　　2、其中 addEventListener('dblclick', function () {}）為主要功能實現

前端vue程式碼：

<template>
    <div class="log_manage">
        <div class="head">
            <div class="step">
                <span><i class="step-i el-icon-back" title="上一層" @click="onStep"></i></span>
                <span><i class="step-i el-icon-right" title="下一層" @click="underStep"></i></span>
            </div>
            <div class="path path_display" v-if 
="is_path" tabindex="-1" @focus="focus_path">
                <i slot="prefix" class="el-input__icon el-icon-folder-opened"
                   style="color: #ff9b11; font-size: 22px; margin: 0 5px"></i>
                <span v-for="(value, index) in display_path" :key="index">
                    <i class="el-icon-arrow-right"></i>
                    {{ value }}
                 
</span>
            </div>
            <el-input class="path path-input" v-model="log_path" placeholder="請輸入內容" v-else
                      tabindex="-1" @blur="blur_path" ref="input" @keyup.enter.native="onSubmit">
                <i slot="prefix" class="el-input__icon el-icon-folder-opened"
                   style 
="color: #ff9b11; font-size: 22px; margin: 0 5px"></i>
            </el-input>
            <div class="refresh">
                <el-button icon="el-icon-refresh" @click="refresh_content" title="重新整理"></el-button>
            </div>
            <div class="search-box">
                <el-input v-model="search_path" placeholder="請輸入內容">
                    <i slot="prefix" class="el-input__icon el-icon-search" style="padding-left: 6px"></i>
                </el-input>
            </div>
            <div class="search">
                <el-button @click="execute_search">搜尋</el-button>
            </div>
        </div>
        <div class="content-box">
            <el-table
                    :data="dir_list"
                    :default-sort="{prop: 'type', order: 'ascending'}"
                    style="width: 100%">
                <el-table-column
                        prop="name"
                        label="名稱"
                        sortable
                        width="260">
                    <template slot-scope="scope">
                        <span v-if="scope.row.type === '資料夾'">
                            <i class="el-icon-folder" style="color: #ff9b11;"></i>
                            {{ scope.row.name }}
                        </span>
                        <span v-else>
                            <i class="el-icon-tickets"></i>
                            {{ scope.row.name }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="time"
                        sortable
                        label="修改日期"
                        width="220">
                </el-table-column>
                <el-table-column
                        class="file-type"
                        prop="type"
                        sortable
                        label="型別"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="size"
                        label="大小"
                        width="460">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button @click="my_modify(scope.row)" type="text" size="small">修改</el-button>
                        <el-button @click="my_delete(scope.row)" type="text" size="small">刪除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

js：

<script>
    import {check, open_file} from "@/js/log_manage"

    export default {
        name: "LogManage",
        mounted() {
            this.$nextTick(() => {
                setTimeout(this.bindEvent, 500)
            })
        },
        data() {
            return {
                dir_list: [
                    {'name': 'file1', 'time': '2002/10/22', 'type': '文字文件', 'size': '100k'},
                    {'name': 'file2', 'time': '2002/11/23', 'type': '文字文件', 'size': '100M'},
                    {'name': 'file3', 'time': '2002/9/24', 'type': '文字文件', 'size': '10M'},
                    {'name': 'file4', 'time': '2002/8/25', 'type': '文字文件', 'size': '1k'},
                    {'name': 'log', 'time': '2002/8/25', 'type': '資料夾', 'size': ''},
                    {'name': 'case', 'time': '2002/9/24', 'type': '資料夾', 'size': ''},
                    {'name': 'var', 'time': '2002/10/22', 'type': '資料夾', 'size': ''},
                ],
                // 路徑相關
                is_path: true,
                // 初始路徑
                base_path: 'logs',
                // 當前路徑
                log_path: 'logs/sdfd/fdfd',
                // 搜尋路徑
                search_path: '',
                // 顯示路徑
                display_path: ['logs', '123'],
                // 前進一步
                history_path: 'logs/sdfd/fdfd',
                dir_name: '',
            }
        },
        methods: {
            // 路徑顯示
            focus_path() {
                this.is_path = false;
                this.$nextTick(() => {
                    this.$refs.input.focus()
                })
            },
            blur_path() {
                this.is_path = true;
                this.log_path = this.base_path
            },
            // enter 跳轉
            onSubmit() {
                console.log(this.log_path)
            },
            // 重新整理
            refresh_content() {
                console.log(this.log_path)
            },
            // 執行搜尋
            execute_search() {
                console.log(this.search_path)
            },
            // 上一步
            onStep() {
                if (this.log_path === this.base_path) {
                    return
                }
                let path = this.log_path.split('/');
                path.pop(-1);
                this.log_path = path.join('/');
                console.log(this.log_path);
            },
            // 下一步
            underStep() {
                if (this.log_path === this.history_path) {
                    return
                }
                let path_list = this.history_path.split('/');
                let path = this.log_path.split('/');
                for (let i = 0; i < path_list.length; i++) {
                    if (path_list[i] === path[path.length - 1]) {
                        let under_path = path_list[i + 1];
                        path.push(under_path);
                        this.log_path = path.join('/');
                        break
                    }
                }
                console.log(this.log_path)
            },
            dir_open(name) {
                console.log(name);
                let path = this.log_path + '/' + name;
                check(path)
            },
            file_open(name) {
                console.log(name);
                let path = this.log_path + '/' + name;
                open_file(path)
            },
            // 繫結
            bindEvent() {
                // 雙擊開啟
                let item = document.querySelectorAll('tr.el-table__row');
                for (let i = 0; i < item.length; i++) {
                    let td = item[i].childNodes;
                    if (td[2].childNodes[0].textContent === '資料夾') {
                        let dir_open_event = this.dir_open;
                        item[i].addEventListener('dblclick', function () {
                            dir_open_event(td[0].childNodes[0].textContent.trim())
                        });
                        // item[i].style.background  = 'red'

                    } else {
                        let file_open_event = this.file_open;
                        item[i].addEventListener('dblclick', function () {
                            file_open_event(td[0].childNodes[0].textContent.trim())
                        });
                    }
                }
            },
        }

    }
</script>

css：

<style scoped>
    .head {
        /*line-height: 60px;*/
        height: 40px;
    }

    /* 頂部欄 */
    .step {
        float: left;
        width: 80px;
    }

    .step > span {
        line-height: 40px;
        text-align: center;
    }

    .step-i {
        width: 40px;
        font-size: 20px;
        color: #7e8188;
    }

    .step-i:hover {
        color: #0978e7c2;
    }

    .path {
        width: 55%;
        float: left;
        line-height: 40px;
    }

    .path_display {
        background-color: #FFF;
        background-image: none;
        border: 1px solid #DCDFE6;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: 14px;
        height: 40px;
        padding: 0 15px 0 4px;
        transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    }

    /deep/ .el-input__inner {
        padding-left: 45px;
        border-radius: 0 !important;
    }

    .refresh {
        text-align: center;
        float: left;
        border-radius: 0;
    }

    .refresh > .el-button {
        text-align: center;
        padding: 0;
        width: 40px;
        line-height: 38px;
        font-size: 18px;
        color: #999b9d;
        border: 1px solid #DCDFE6;
        border-radius: 0
    }

    .refresh > .el-button:hover {
        color: #0978e7c2;
    }

    .search-box {
        width: calc(100% - 55% - 180px);
        float: left;
    }

    .search {
        float: left;
        border-radius: 0;
        border: 0;
    }

    .search > .el-button {
        text-align: center;
        padding: 0;
        width: 60px;
        line-height: 38px;
        border: 1px solid #DCDFE6;
        border-radius: 0
    }

    /* 內容 */
    .content-box {
        background-color: pink;
        height: 600px;
    }
    /deep/.el-table__row:hover {
        background-color: pink;
    }
</style>

import js：可根據情況自行設定

import axios from "@/js/my_axios";


function check(path) {
    console.log(path);
    let data = {
        'path': path
    };

    return axios({
        method: 'get',
        url: 'log_manage',
        params: data,
    }).then((response) => {
        console.log(response.data)
    }).catch((error) => {
        console.log(error);
    });
}

function open_file(path) {
    console.log(path);
    let data = {
        'path': path
    };

    return axios({
        method: 'post',
        url: 'log_manage',
        data: data,
    }).then((response) => {
        console.log(response.data)
    }).catch((error) => {
        console.log(error);
    });
}


function delete_file(path) {
    console.log(path);
    let data = {
        'path': path
    };

    return axios({
        method: 'delete',
        url: 'log_manage',
        data: data,
    }).then((response) => {
        console.log(response.data)
    }).catch((error) => {
        console.log(error);
    });
}


export {
    check,
    open_file,
    delete_file,
}