vue+elementui怎樣點擊table中的單元格觸發事件--彈框

 

• 可以先看一下官網中table的自定義列模板代碼

1.  
   <template>
2.  
   <el-table
3.  
   :data="tableData"
4.  
   border
5.  
   style="width: 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="width: 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中，就像官網中例子一樣，但是這樣會在點擊時觸發多次(次數與當前頁展示的數量一致)