1==》在操作下面可以有下拉列表 选择不同的内容 并且互不影响
使用【Select 选择器】 的基础用法
1bug==>
不能够将选中的样似 输入表单中
因为你将 <template slot-scope="scope">这个删除了
解决如下
<el-table-column label="操作">
<template slot-scope="scope"> //new add
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</el-table-column>
2 bug==>不能够让一个发生改变 所有的都在发生改变
是因为共用了一个v-model的原因
动态绑定v-model
当你发现是v-model的原因,你就去动态绑定v-model,发现原因比解决问题更重要
完整代码如下
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column label="日期" width="180">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-select
v-model="scope.row.zhi"
placeholder="请选择"
@change="change(scope.$index, scope.row)"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
zhi: "全部"
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
zhi: "全部"
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
zhi: "全部"
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
zhi: "全部"
}
],
// 操作数据开始
options: [
{
value: "1",
label: "黄金糕"
},
{
value: "2",
label: "双皮奶"
},
{
value: "3",
label: "蚵仔煎"
},
{
value: "4",
label: "龙须面"
},
{
value: "5",
label: "北京烤鸭"
}
]
// end-----
};
},
methods: {
change(index, row) {
console.log(index, row);
}
}
};
</script>
遇见问题,这是你成长的机会,如果你能够解决,这就是收获。
作者:晚来南风晚相识