zoukankan      html  css  js  c++  java
  • element ui 表格在单元格上编辑

    <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    class="tableEFG"
    style=" 98%;margin: 0 auto;"
    >
    <el-table-column align="center" width="80" prop="" label="序号">
    <template slot-scope="scope">
    <span>{{scope.$index + 1}}</span>
    </template>
    </el-table-column>
    <el-table-column align="center" prop="category" label="级别">
    <template slot-scope="scope">
    <el-input
    class="edit-cell"
    v-if="scope.row.seen"
    v-model="scope.row.category"
    maxlength="1"
    @blur="loseFcous(scope.$index, scope.row)"
    ></el-input>
    <span v-else>{{scope.row.category}}</span>
    </template>
    </el-table-column>
    <el-table-column align="center" prop="title" label="名称"></el-table-column>
    <el-table-column align="center" label="操作" width="180">
    <template slot-scope="scope">
    <el-button class="editben" size="mini" @click="handleEdit(scope.$index, scope.row)"></el-button>
    <el-button class="delben" size="mini" @click="handleDelete(scope.$index, scope.row)"></el-button>
    </template>
    </el-table-column>
    </el-table>
     
    data() {
    return {
    tableData: [
    {
    category: "1",
    title: "qwewq",
    seen: false//做标记,判断是该显示文字还是输入框
    },
    {
    category: "5",
    title: "qwewq",
    seen: false
    },
    {
    seen: false,
    category: "2",
    title: "qwewq"
    }
    ]
    };
    },
     
    methods: {
    // 判断输入框的文字正确后 死去焦点隐藏框
    loseFcous(index, row) {
    let reg = /^[0-9]*$/;
    if(!reg.test(row.category) || row.category == ""){
    this.$message({
    message: "级别只能输入数字,长度为1!",
    type: "warning"
    });
    row.seen = true;
    }else{
    row.seen = false;
    }
    },
    // 来回店家行内编辑 判断输入框的文字正确后 隐藏框
    handleEdit(index, row) {
    let reg = /^[0-9]*$/;
    if(!reg.test(row.category) || row.category == ""){
    this.$message({
    message: "级别只能输入数字,长度为1!",
    type: "warning"
    });
    row.seen = true;
    }else{
     
    row.seen =!row.seen;
    }
    },
    handleDelete(){}
    }
  • 相关阅读:
    ruby2.2.2在msvc2010上编译
    msvc2010生成的指令序列有问题,可能跟pgo有关
    Could not load file or assembly 'Oracle.DataAccess' or one of its dependencies. An attempt was made to load a program with an incorrect format.
    正则总结
    实现点击按钮全选功能
    轮播图(省代码方法)
    js实现复制URL功能
    字符串的常用方法
    两种文件上传的实现-Ajax和form+iframe
    jquery中attr和prop的区别
  • 原文地址:https://www.cnblogs.com/lihong-123/p/10948711.html
Copyright © 2011-2022 走看看