欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-06-08 15:44:36
...

elementui中提供了点击行处理事件

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