Vue腳手架的elementui表格裏面嵌套輸入框

<el-table
:data="ruleLanguage"
border
style="width: 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);},
相關文章
相關標籤/搜索