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);
},
原文地址:https://www.cnblogs.com/yanerbaobao/p/7645947.html