• 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);
    },
  • 相关阅读:
    Centos7上安装docker
    docker部署mysql5.6.40
    centos7上部署spring boot并保存日志
    [转载]Ocelot简易教程(一)Ocelot是什么
    浅谈Surging服务引擎中的RabbitMQ组件和容器化部署
    [转载]Surging教学视频资源汇总
    [转载]netcore 使用surging框架发布到docker
    [转载]Surging 分布式微服务框架使用入门
    [转载]Surging Demo 项目之一
    [转载]剥析surging的架构思想
  • 原文地址:https://www.cnblogs.com/yanerbaobao/p/7645947.html
Copyright © 2020-2023  润新知