vue+elementui怎样点击table中的单元格触发事件--弹框
生活随笔
收集整理的這篇文章主要介紹了
vue+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+elementui怎样点击table中的单元格触发事件--弹框的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: mac java+selenium 实现
- 下一篇: .net 8 实现 JWT 无状态设计