Vue.js 为元素ui表设置行组件

刚开始使用Vue和Element UI libraray，但被他们的表组件卡住了：

---

我希望每个表行都有一个组件来处理该组件中与该行相关的所有逻辑（操作、单击等），但是检查它们的文档时，组件看起来是基于列的。我缺少什么？

让我向您展示如何使用基本的

el表

，例如处理一行的数据

var Main={
数据（）{
返回{
表格数据：[{
日期：“2016-05-03”，
名字：“汤姆”，
地址：洛杉矶格罗夫街189号
}, {
日期：“2016-05-02”，
名字：“汤姆”，
地址：洛杉矶格罗夫街189号
}, {
日期：“2016-05-04”，
名字：“汤姆”，
地址：洛杉矶格罗夫街189号
}, {
日期：“2016-05-01”，
名字：“汤姆”，
地址：洛杉矶格罗夫街189号
}]
}
},
方法：{
handleEdit（索引，行）{
console.log（索引，行）；
},
handleDelete（索引，行）{
//在这里，您可以访问要删除的行数据（对象数组中的对象）
console.log（索引，行）；
此.$confirm（'这将永久删除记录。是否继续？'，'警告'{
confirmButtonText:'确定'，
cancelButtonText:“取消”，
类型：“警告”
}).然后（（）=>{
该表数据拼接（索引1）；
这是一封$message({
键入：“成功”，
消息：“删除已完成”
});
}).catch（（）=>{
这是一封$message({
键入：“info”，
消息：“删除已取消”
});
});
}
}
}
变量向量=Vue.extend（主）
新Ctor（）.$mount（'#app'）

@import url（“//unpkg.com/element-ui@2.12.0/lib/theme chalk/index.css）

{{scope.row.date}
{{scope.row.name}
编辑
删除
根据答案，您可以切换输入，以允许对每行的所有列进行编辑。我根据他的回答做了一个简单的演示


var Main={
数据（）{
返回{
表格数据：[{
日期：“2016-05-03”，
名字：“汤姆”，
地址：洛杉矶格罗夫街189号
可编辑：false
}, {
日期：“2016-05-02”，
名字：“汤姆”，
地址：洛杉矶格罗夫街189号
可编辑：false
}, {
日期：“2016-05-04”，
名字：“汤姆”，
地址：洛杉矶格罗夫街189号
可编辑：false
}, {
日期：“2016-05-01”，
名字：“汤姆”，
地址：洛杉矶格罗夫街189号
可编辑：false
}]
}
},
方法：{
handleEdit（索引，行）{
console.log（索引，行）；
row.editable=！row.editable；
},
handleDelete（索引，行）{
//在这里，您可以访问要删除的行数据（对象数组中的对象）
console.log（索引，行）；
此.$confirm（'这将永久删除记录。是否继续？'，'警告'{
confirmButtonText:'确定'，
cancelButtonText:“取消”，
类型：“警告”
}).然后（（）=>{
该表数据拼接（索引1）；
这是一封$message({
键入：“成功”，
消息：“删除已完成”
});
}).catch（（）=>{
这是一封$message({
键入：“info”，
消息：“删除已取消”
});
});
}
}
}
变量向量=Vue.extend（主）
新Ctor（）.$mount（'#app'）
@import url（“//unpkg.com/element-ui@2.12.0/lib/theme chalk/index.css）

{{scope.row.date}
{{scope.row.name}
编辑
删除
是否希望能够对最后一列中的当前行执行一系列操作（操作）？例如编辑和删除函数Yes，或处理对表行元素的单击。我是Vue的新手，所以如果我错了，请纠正我，但我的理解是，我将所有内容都放在一个组件中，该组件属于一个整体，可以独立处理。因此，在我的示例中，列表负责从后端加载元素，处理无休止的滚动等，以及行组件与表的一个条目相关的所有内容。在使用对象数组设置
el table
的属性
data
后，您可以访问以下数据：
行
，
列
，
$index
并通过
作用域插槽存储（表的状态管理）
。