vue+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中，就像官网中例子一样，但是这样会在点击时触发多次(次数与当前页展示的数量一致)