ElementUI表格⾏编辑单元格编辑⽀持（输⼊框，选择框）Demo 嗯，需要做成这个样⼦，所以⽹上查了些资料。整理了下。提供⼏个⼀个思路。不⾜之处请⼩伙伴指出来。
普通版的table可编辑内嵌lect选择框，输出框，编辑删除添加等
<!DOCTYPE html>
<html>
<head>
2的分解<meta chart="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="/element-ui/lib/index.js"></script>
</head>
<body >
<div id="app">
<el-card>
<el-table :data="tableData" :row-class-name="tableRowClassName">
<el-table-column prop="date" label="⽇期" width="180">
<template slot-scope="scope">
<el-lect popper-class="role-option" v-model="w.date" placeholder="请选择" size="small">
<el-option v-for="item in optionData" :key="item.value" :label="item.name"
:value="item.value"></el-option>
</el-lect>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
<template slot-scope="scope">
<el-lect popper-class="role-option" v-model="w.name" placeholder="请选择" size="small">
<el-option v-for="item in optionName" :key="item.value" :label="item.name"
:value="item.value"></el-option>
</el-lect>
</template>
</el-table-column>
<el-table-column prop="addr" width="180" label="地址">
<template slot-scope="scope">
<el-lect popper-class="role-option" v-model="w.addr" placeholder="请选择" size="small">
<el-option v-for="item in optionAddr" :key="item.value" :label="item.name"
:value="item.value"></el-option>
</el-lect>
</template>
</el-table-column>
<el-table-column label="操作" width="100" header-align="right">
<template slot-scope="scope">
<div >
<el-link icon="el-icon-plus" size="mini" type="primary"
@click="handleAdd(scope.$index, w)" :underline="fal"
></el-link>
<el-link icon="el-icon-delete" size="mini" @click="handleDelete(scope.$index, w)"
type="danger" :underline="fal"></el-link>
</div>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</body>
<script>
new Vue({
el: '#app',
data() {
return {
optionData: [{ value: "1", name: "2016-05-03" }, { value: "2", name: "2016-05-04" }, { value: "3", name: "2016-05-05" }],
optionName: [{ value: "1", name: " 王⼩虎" }, { value: "2", name: "王⼩龙" }, { value: "3", name: "王⼩狗" }],
optionAddr: [{ value: "1", name: "北凉" }, { value: "2", name: "西北道" }, { value: "3", name: "泰安城" }],
tableData: [{
date: '2016-05-02',
name: '王⼩虎',
addr: '北凉',
}, {
date: '2016-05-04',
name: '王⼩狗',
addr: '西北道'
},]
}
},
mounted() {
},
methods: {
handleAdd(index, row) {
this.tableData.push({
date: '',
name: '',
addr: ''
});
},
handleDelete(index, row) {
if (index > 0) {
this.tableData.splice(index, 1);
}
},
tableRowClassName({ row, rowIndex }) {
if ((rowIndex+1)%2 === 1) {
工程英文
return 'warning-row';
} el{
return 'success-row';
}
return '';
}
},
props: {},
computed: {},
created() {
},
watch: {},
})
</script>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
</html>
表格隐藏展⽰，数据联动，所谓数据联动，意思是通过第⼀列的选择控制之后两列的数据源展⽰不同的数据项。这⾥需要注意的如果选择框的数据源是动态通过接⼝获取的，那么需要把数据源由变量设置为函数，同时，接⼝的请求必须是同步的，不可以是异步，axios默认是异步的，如果没有合适的解决⽅案，可以使⽤jquery 的ajax⽅法。
<!DOCTYPE html>
<html>
<head>
<meta chart="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="/element-ui/lib/index.js"></script>
</head>
<body >
四大工学院<div id="app">
<el-card>
<el-table :data="tableData" :row-class-name="tableRowClassName">
<el-table-column prop="date" label="⽇期" width="180">
<template slot-scope="scope">
<el-lect popper-class="role-option" v-model="w.date" placeholder="请选择" size="small"
@change="dateHandleChange">
<el-option v-for="item in optionData" :key="item.value" :label="item.name"
:value="item.value"></el-option>
</el-lect>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
<template slot-scope="scope">
<el-lect popper-class="role-option" v-model="w.name" placeholder="请选择" size="small" v-show="w.date != '2'">
<el-option v-for="item in optionName" :key="item.value" :label="item.name"
:value="item.value"></el-option>
</el-lect>
</template>
</el-table-column>
<el-table-column prop="addr" width="180" label="地址">
<template slot-scope="scope">四字成语寓言故事
<el-lect popper-class="role-option" v-model="w.addr" placeholder="请选择" size="small">
<el-option v-for="item in w)" :key="item.value" :label="item.name"
:value="item.value"></el-option>
</el-lect>
</template>
</el-table-column>
<el-table-column label="操作" width="100" header-align="right">
<template slot-scope="scope">
<div >
<el-link icon="el-icon-plus" size="mini" type="primary"
@click="handleAdd(scope.$index, w)" :underline="fal"
></el-link>
<el-link icon="el-icon-delete" size="mini" @click="handleDelete(scope.$index, w)"
type="danger" :underline="fal"></el-link>
</div>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</body>
<script>
/**
* @description: 表格隐藏展⽰，数据联动
* @author: Liruilong
*/
new Vue({
el: '#app',
data() {
return {
optionData: [{ value: "1", name: "2016-05-03" }, { value: "2", name: "2016-05-04" }, { value: "3", name: "2016-05-05" }],
optionName: [{ value: "1", name: " 王⼩虎" }, { value: "2", name: "王⼩龙" }, { value: "3", name: "王⼩狗" }],
tableData: [{
date: '1',
name: '1',
addr: '1',
}],
optionAddrMapper: new Map(),
牤牛河}
},
mounted() {
// 模拟ajax初始化数据集
this.optionAddrMapper.t("1", [{ value: "1", name: "北凉" }, { value: "2", name: "西北道" }, { value: "3", name: "泰安城" }]);
},
methods: {
optionsAddr(row) {
console.log(row.date)
console.log((row.date));
return (row.date);
},
//联动处理//模拟ajax调⽤接⼝获取数据.⽇期选择会联动地址
dateHandleChange(val) {
// 模拟根据⽇期得到地址的数据集这⾥写ajax ，必须是同步的请求。
this.optionAddrMapper.t("1", [{ value: "1", name: "北凉" }, { value: "2", name: "西北道" }, { value: "3", name: "泰安城" }]);
this.optionAddrMapper.t("2", [{ value: "9", name: "西域" }, { value: "8", name: "苗疆" }, { value: "7", name: "剑⽓长城" }]);
this.optionAddrMapper.t("3", [{ value: "10", name: "圣贤林" }, { value: "11", name: "青冥天下" }, { value: "12", name: "藕花福地" }]); },
handleAdd(index, row) {
this.tableData.push({
date: '',
name: '',
罚款单范本addr: ''
});
},
风云防火墙handleDelete(index, row) {
if (index > 0) {
this.tableData.splice(index, 1);
}
},
tableRowClassName({ row, rowIndex }) {
if ((rowIndex + 1) % 2 === 1) {
return 'warning-row';
} el {
return 'success-row';
}
return '';
}
},
props: {},
computed: {},
created() {
},
watch: {},
})
</script>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
</html>
表格整体与编辑视图的切换，双击表格，或进⾏视图切换。可以编辑也可以展⽰
<!DOCTYPE html>
<html>
<head>
<meta chart="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="/element-ui/lib/index.js"></script>
<script src="/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body >
<div id="app">
<el-card>
<el-table :data="tableData" :row-class-name="tableRowClassName"
@cell-dblclick="editdbClick">
<el-table-column prop="date" label="⽇期" width="180">
<template slot-scope="scope">
<el-lect v-show="!isVlable" popper-class="role-option" v-model="w.date"
placeholder="请选择" size="small" @change="dateHandleChange">
<el-option v-for="item in optionData" :key="item.name" :label="item.name"
:value="item.value"></el-option>
</el-lect>
<span v-show="isVlable">{{ w.date)}} </span>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
<template slot-scope="scope">
<el-lect v-show="!isVlable && w.date != '2' " popper-class="role-option"
v-model="w.name" placeholder="请选择" size="small">
<el-option v-for="item in optionName" :key="item.name" :label="item.name"
:value="item.value"></el-option>
</el-lect>
<span v-show="isVlable">{{w.name) }} </span>
</template>
</el-table-column>
<el-table-column prop="addr" width="180" label="地址">
<template slot-scope="scope">
<el-lect v-show="!isVlable" popper-class="role-option" v-model="w.addr"
placeholder="请选择" size="small">
<el-option v-for="item in w)" :key="item.name" :label="item.name"
:value="item.value"></el-option>
</el-lect>
<span v-show="isVlable">{{w.addr) }}
</span>
</template>
</el-table-column>
<el-table-column label="操作" width="100" header-align="right">
<template slot-scope="scope">
<div >
<el-link icon="el-icon-plus" size="mini" type="primary"
@click="handleAdd(scope.$index, w)" :underline="fal"
></el-link>人民代表大会制度的优越性
<el-link icon="el-icon-delete" size="mini" @click="handleDelete(scope.$index, w)"
type="danger" :underline="fal"></el-link>
</div>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</body>
<script>
/**
* @description: 表格与编辑视图的切换，双击表格，或进⾏视图切换。可以编辑也可以展⽰。
* @author: Liruilong
*/
new Vue({
el: '#app',
data() {
return {
isVlable: fal,
optionData: [{ value: "1", name: "2016-05-03" }, { value: "2", name: "2016-05-04" }, { value: "3", name: "2016-05-05" }], optionName: [{ value: "1", name: " 王⼩虎" }, { value: "2", name: "王⼩龙" }, { value: "3", name: "王⼩狗" }],
optionAddr:[{ value: "1", name: "北凉" }, { value: "2", name: "西北道" }, { value: "3", name: "泰安城" }],
tableData: [{
date: '1',
name: '1',
addr: '1',
}],
optionAddrMapper: new Map(),
date: '',
name: '',
address: '',
}
},
created() {
},
mounted() {
// 模拟ajax初始化数据集
this.optionAddrMapper.t("1", [{ value: "1", name: "北凉" }, { value: "2", name: "西北道" }, { value: "3", name: "泰安城" }]); },
methods: {
optionDataf(id) {
let name = id;
this.optionData.forEach((element) => {
if (element.value == id) {
name = element.name;
}
});
return name;
},
optionNamef(id) {
let name = id;
this.optionName.forEach((element) => {
if (element.value == id) {
name = element.name;
}
});
return name;
},
optionsAddrf(id) {
let name = id;
if(this.optionAddrMapper){
this.optionAddrMapper.forEach((value, key) => {
value.forEach((e) => {
if (e.value == id) {
name = e.name;
}
})
});
}el{
this.optionAddr.forEach( e =>{
if (e.value == id) {
name = e.name;
}
});
}
return name;
},
editdbClick(row, column, cell, event) {
this.isVlable = !this.isVlable;
},
saveClick(row, column, cell, event) {
},
optionsAddr(row) {
return (row.date);
},
//联动处理//模拟ajax调⽤接⼝获取数据.⽇期选择会联动地址
dateHandleChange(val) {
// 模拟根据⽇期得到地址的数据集这⾥写ajax ，必须是同步的请求。
this.optionAddrMapper.t("1", [{ value: "1", name: "北凉" }, { value: "2", name: "西北道" }, { value: "3", name: "泰安城" }]);
this.optionAddrMapper.t("2", [{ value: "9", name: "西域" }, { value: "8", name: "苗疆" }, { value: "7", name: "剑⽓长城" }]);
this.optionAddrMapper.t("3", [{ value: "10", name: "圣贤林" }, { value: "11", name: "青冥天下" }, { value: "12", name: "藕花福地" }]); },
// 添加操作。默认会保存当前⾏的数据，并添加⼀条新数据
handleAdd(index, row) {
if ((row.date && row.name && row.addr) || (row.date && row.addr)) {
this.tableData.push({
date: '',
name: '',
addr: ''
});
}
},
handleDelete(index, row) {
debugger
if (index > 0) {
this.tableData.splice(index, 1);
}
},
tableRowClassName({ row, rowIndex }) {
row.index = rowIndex;
if ((rowIndex + 1) % 2 === 1) {
return 'warning-row';
} el {
return 'success-row';
}
return '';
}
},
props: {},
computed: {},
created() {
},
watch: {},
filters: {
},b
})
</script>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
</html>
⾏编辑视图⼿动切换，通过双击表格实现编辑的表格的切换。
