本文主要介绍了利用vue.js elementui实现table中单元格弹框的方法，文章通过实例代码的方式介绍的非常详细，具有一定的参考学习价值，感兴趣的朋友可以跟我来看看吧
elementui中提供了点击行处理事件
查看位置： elementui的table事件
elementui的table中怎样点击某个单元格触发事件？
可以先看一下官网中table的自定义列模板代码
<template>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
label="日期"
width="180">
<template scope="scope">
<el-icon name="time"></el-icon>
<span style="margin-left: 10px">{{ scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column
label="姓名"
width="180">
<template scope="scope">
<el-popover trigger="hover" placement="top">
<p>姓名: {{ scope.row.name }}</p>
<p>住址: {{ scope.row.address }}</p>
<div slot="reference" class="name-wrapper">
<el-tag>{{ scope.row.name }}</el-tag>
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column label="操作">
<template scope="scope">
<el-button
size="small"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button
size="small"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
methods: {
handleEdit(index, row) {
console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
}
}
}
</script>点击单元格弹出框可以使用template-scope方式实现
父组件
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
label="编号"
prop = "number"
width="180">
<template scope="scope">
<div style="color:red;text-decoration:underline;cursor:pointer;" @click="getMore(scope.row)">{{ scope.row.date }}</div>
</template>
</el-table-column>
<el-table-column
label="名称"
prop = "name"
width="180">
<template scope="scope">
<div style="color:red;text-decoration:underline;cursor:pointer;" @click="getMore2(scope.row)">{{ scope.row.date }}</div>
</template>
</el-table-column>
</el-table>
<el-dialog :visible-sync="getA">
<my-component :rowaa=row></my-component>
</el-dialog>
<el-dialog :visible-sync="getB">
<my-component2 :rowaa=row></my-component2>
</el-dialog>
<script>
import myComponent from './mycomponent'
import myComponent2 form './mycomponent2'
export default {
data() {
return {
tableData : [
{"number" : 1,"name":"y"},
{"number" : 2,"name":"x"},
],
getA : false,
getB : false,
row : ''
}
},
components: {
'my-component' : myComponent,
'my-component2' : myComponent2
},
methods : {
getMore(row) {
this.getA = true
this.row = row
},
getMore2(row) {
this.getB = true
this.row = row
}
}
}
</script>子组件 mycomponent
<div>{{formData}}</div>
<script>
export default {
props: ['rowaa'],
data() {
return {
formData:''
}
},
created() {
this.getData()
},
watch : {
'rowaa' : 'getData'
},
methods: {
getData() {
//从后台获取数据逻辑 model.CacheModel.get('api/' + this.rowaa + '.json')
//通过this.rowaa就可以获取传过来的值
this.formData = 333
}
}
}
</script>问题解决
可以使用template+slot插值进行管理
点击找到当前行的信息，然后再根据该信息在子组件中请求数据
也试过通过点击行的事件，判断在哪一个单元格然后处理事件，这样也可以，但如果在表格中列存放的内容发生变化又得重新调整
也试过dialog弹出框直接写在当前单元格的template中，就像官网中例子一样，但是这样会在点击时触发多次(次数与当前页展示的数量一致)
扩展资料
vue template组件、slot插槽
vue组件子组件引用，在父组件中引用，引用方式通过from
import NavHeader from '../components/NavHeader.vue' import NavFooter from '@/components/NavFooter.vue' import NavBread from '@/components/NavBread.vue'
import后的为引入后的组件名，其中@表示是src,通过@不用一层层往上找目录，可以直接写，@的配置在webpack.base.conf.js中。
组件引入后在要在父组件中用标签的形式写入子组件，写入的方式：
<nav-header></nav-header>
<nav-footer></nav-footer>
在templat中要将组件的名称该为小写，两个单词直接加“-”。
2.slot插槽
slot插槽的使用，在子组件中直接使用
<slot></slot> //子组件NavBread
在父组件中的该组件名称(nav-bread)里直接写需要的内容
<nav-bread> <span slot="bread">goods</span> <span>测试</span> </nav-bread>
如果需要多个插槽，slot用name属性标识。在在父组件中的该组件名称(nav-bread)里的内容中加上“slot="name值"”
<slot name="bread"></slot> //name值为bread <slot name="test"></slot>
<span slot="bread">goods</span> //slot值为bread <span slot="test">测试</span>
以上就是利用vue.js elementui实现table中单元格弹框的方法，其他相关资料请在“DMZJWZ资料网”搜索拦中进行搜索查找，感谢大家对DMZJWZ资料网的支持。
