// 数据绑定
var result = res.data // 后台获取的数据源
// result 为数据源
// 数据通过用artTemplate渲染然后绑定到页面上
$('#list_wrap').append(template('tpl_list_item', {
data: result
})
// 事件绑定
$('#list_wrap').on('click', '.edit-btn', function(){
var $this = $(this)
var idx = $this.attr('data-idx')
// 这样可以获取到点击项的原始数据
var item = result[idx]
})
html代码
<!-- 用了element-ui不过没影响 -->
<el-table :data="tableData" element-loading-text="拼命加载中" style="width: 100%">
<el-table-column prop="MoName" label="菜单名称"></el-table-column>
<el-table-column prop="MoSort" label="菜单排序"></el-table-column>
<el-table-column label="操作">
<template scope="scope">
<el-button size="small" @click="showUpdatePop(scope.$index, scope.row)">查看详情</el-button>
<el-button size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
调用函数
// 显示修改弹出层
showUpdatePop(idx, item) {
this.page.popShow = true
this.$nextTick(function () {
this.$refs.popForm.setValue(item)
})
}