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=" 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>