vue+elementui怎样点击table中的单元格触发事件--弹框

 

• 可以先看一下官网中table的自定义列模板代码

1.  
   <template>
2.  
   <el-table
3.  
   :data="tableData"
4.  
   border
5.  
   style=" 100%">
6.  
   <el-table-column
7.  
   label="日期"
8.  
   width="180">
9.  
   <template scope="scope">
10.  
    <el-icon name="time"></el-icon>
11.  
    <span style="margin-left: 10px">{{ scope.row.date }}</span>
12.  
    </template>
13.  
    </el-table-column>
14.  
    <el-table-column
15.  
    label="姓名"
16.  
    width="180">
17.  
    <template scope="scope">
18.  
    <el-popover trigger="hover" placement="top">
19.  
    <p>姓名: {{ scope.row.name }}</p>
20.  
    <p>住址: {{ scope.row.address }}</p>
21.  
    <div slot="reference" class="name-wrapper">
22.  
    <el-tag>{{ scope.row.name }}</el-tag>
23.  
    </div>
24.  
    </el-popover>
25.  
    </template>
26.  
    </el-table-column>
27.  
    <el-table-column label="操作">
28.  
    <template scope="scope">
29.  
    <el-button
30.  
    size="small"
31.  
    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
32.  
    <el-button
33.  
    size="small"
34.  
    type="danger"
35.  
    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
36.  
    </template>
37.  
    </el-table-column>
38.  
    </el-table>
39.  
    </template>
40.  
     
41.  
    <script>
42.  
    export default {
43.  
    data() {
44.  
    return {
45.  
    tableData: [{
46.  
    date: '2016-05-02',
47.  
    name: '王小虎',
48.  
    address: '上海市普陀区金沙江路 1518 弄'
49.  
    }, {
50.  
    date: '2016-05-04',
51.  
    name: '王小虎',
52.  
    address: '上海市普陀区金沙江路 1517 弄'
53.  
    }, {
54.  
    date: '2016-05-01',
55.  
    name: '王小虎',
56.  
    address: '上海市普陀区金沙江路 1519 弄'
57.  
    }, {
58.  
    date: '2016-05-03',
59.  
    name: '王小虎',
60.  
    address: '上海市普陀区金沙江路 1516 弄'
61.  
    }]
62.  
    }
63.  
    },
64.  
    methods: {
65.  
    handleEdit(index, row) {
66.  
    console.log(index, row);
67.  
    },
68.  
    handleDelete(index, row) {
69.  
    console.log(index, row);
70.  
    }
71.  
    }
72.  
    }
73.  
    </script>
74.  
     

点击单元格弹出框可以使用template-scope方式实现

• 父组件

1.  
   <el-table
2.  
   :data="tableData"
3.  
   border
4.  
   style=" 100%">
5.  
   <el-table-column
6.  
   label="编号"
7.  
   prop = "number"
8.  
   width="180">
9.  
   <template scope="scope">
10.  
    <div style="color:red;text-decoration:underline;cursor:pointer;" @click="getMore(scope.row)">{{ scope.row.date }}</div>
11.  
    </template>
12.  
    </el-table-column>
13.  
    <el-table-column
14.  
    label="名称"
15.  
    prop = "name"
16.  
    width="180">
17.  
    <template scope="scope">
18.  
    <div style="color:red;text-decoration:underline;cursor:pointer;" @click="getMore2(scope.row)">{{ scope.row.date }}</div>
19.  
    </template>
20.  
    </el-table-column>
21.  
    </el-table>
22.  
     
23.  
    <el-dialog :visible-sync="getA">
24.  
    <my-component :rowaa=row></my-component>
25.  
    </el-dialog>
26.  
    <el-dialog :visible-sync="getB">
27.  
    <my-component2 :rowaa=row></my-component2>
28.  
    </el-dialog>
29.  
     
30.  
    <script>
31.  
    import myComponent from './mycomponent'
32.  
    import myComponent2 form './mycomponent2'
33.  
    export default {
34.  
    data() {
35.  
    return {
36.  
    tableData : [
37.  
    {"number" : 1,"name":"y"},
38.  
    {"number" : 2,"name":"x"},
39.  
    ],
40.  
    getA : false,
41.  
    getB : false,
42.  
    row : ''
43.  
    }
44.  
    },
45.  
    components: {
46.  
    'my-component' : myComponent,
47.  
    'my-component2' : myComponent2
48.  
    },
49.  
    methods : {
50.  
    getMore(row) {
51.  
    this.getA = true
52.  
    this.row = row
53.  
    },
54.  
    getMore2(row) {
55.  
    this.getB = true
56.  
    this.row = row
57.  
    }
58.  
    }
59.  
    }
60.  
    </script>
61.  
     

• 子组件 mycomponent

1.  
   <div>{{formData}}</div>
2.  
    
3.  
   <script>
4.  
   export default {
5.  
   props: ['rowaa'],
6.  
   data() {
7.  
   return {
8.  
   formData:''
9.  
   }
10.  
    },
11.  
    created() {
12.  
    this.getData()
13.  
    },
14.  
    watch : {
15.  
    'rowaa' : 'getData'
16.  
    },
17.  
    methods: {
18.  
    getData() {
19.  
    //从后台获取数据逻辑 model.CacheModel.get('api/' + this.rowaa + '.json')
20.  
    //通过this.rowaa就可以获取传过来的值
21.  
    this.formData = 333
22.  
    }
23.  
    }
24.  
    }
25.  
    </script>
26.  
     

问题解决

• 可以使用template+slot插值进行管理
• 点击找到当前行的信息，然后再根据该信息在子组件中请求数据
• 也试过通过点击行的事件，判断在哪一个单元格然后处理事件，这样也可以，但如果在表格中列存放的内容发生变化又得重新调整
• 也试过dialog弹出框直接写在当前单元格的template中，就像官网中例子一样，但是这样会在点击时触发多次(次数与当前页展示的数量一致)