zoukankan      html  css  js  c++  java
  • Vue脚手架的elementui表格里面嵌套输入框

    <el-table
    :data="ruleLanguage"
    border
    style=" 100%"
    highlight-current-row
    @selection-change="handleSelectionChange"
    @select-all="selectAll"
    @row-dblclick="doubleClick"
    @row-click="selected"
    >
    <el-table-column
    prop="languageCode"
    label="编码"
    width="150"
    align="center"
    >
    <template scope="scope">
    <div v-show="!scope.row.isEdit">
    {{ scope.row.languageCode }}
    </div>
    <div v-show="scope.row.isEdit">
    <el-input size="small" v-model="scope.row.languageCode" placeholder="请输入语言编码"
    ></el-input>
    </div>
    </template>
    </el-table-column>
    <el-table-column
    prop="name"
    label="名称"
    align="center">
    <template scope="scope">
    <div v-show="!scope.row.isEdit">
    {{ scope.row.name }}
    </div>
    <div v-show="scope.row.isEdit">
    <el-input size="small" v-model="scope.row.name" placeholder="请输入语言名称"
    ></el-input>
    </div>
    </template>
    </el-table-column>
    <el-table-column
    label="状态"
    width="120"
    align="center">
    <template scope="scope" >
    <div v-if="!scope.row.isEdit">
    {{enableFilter(scope.row.enabled)}}
    </div>
    <div v-if="scope.row.isEdit">
    <el-select v-model="scope.row.enabled" :disabled="!scope.row.isEdit" size="small">
    <el-option label="启用" value='1'></el-option>
    <el-option label="禁用" value='0'></el-option>
    </el-select>
    </div>
    </template>
    <!-- <template scope="scope">
    <el-select v-model="scope.row.enabled" :disabled="!scope.row.isEdit" size="small">
    <el-option label="启用" value='1'></el-option>
    <el-option label="禁用" value='0'></el-option>
    </el-select>
    &lt;!&ndash;<el-switch
    v-model="scope.row.enabled"
    on-color="#13ce66"
    off-color="#ff4949"
    on-value= "1"
    off-value= "0">
    </el-switch>&ndash;&gt;
    </template>-->
    </el-table-column>
    </el-table>
    //script标签里面的data
     ruleLanguage: [],
    /* //分页
    currentPage: 1,
    //每页显示个数选择器的选项设置
    pageSizes: [5, 10, 20, 50, 100],
    //每页显示数量条数
    pageSize: 5,
    //总记录数
    total: 0,*/
    /* pageData: {
    pageNumber: 1,
    pageSize: 5,
    totalCount: 0,
    totalPage: 1
    },*/
    saveData: {},
    /**
    * 新增的表格
    * */
    addLanguageList:[],
    /**
    *表格选中集合
    */
    multipleSelection: [],
    //点击新增函数是输入框显示,
    //新增
    addLanguage:function(){
    let language ={
    languageCode: '',
    name: '',
    enabled: '1',
    isEdit: true
    };
    this.ruleLanguage.push(language);
    this.addLanguageList.push(language);
    },
  • 相关阅读:
    [同上一堂课]小学全年级课程视频下载(含课件)
    新开一扇窗:了解下编程
    谷歌开发者工具使用分享: 法宣获取积分流程分析
    鳄鱼岛 python暴力求解
    C#调用存储过程的几种方法介绍 (转)
    C# 存储过程 输出参数不能返回 的问题?
    DataReader 分页和rownumber
    转c之练手篇——"链表"
    新建NET技术群:专业NET技术
    SQLHepler
  • 原文地址:https://www.cnblogs.com/yanerbaobao/p/7645947.html
Copyright © 2011-2022 走看看