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 삽입값으로 관리 가능
클릭하여 현재 줄의 정보를 찾은 다음 이 정보에 따라 하위 구성 요소에서 데이터를 요청합니다
행을 클릭하는 이벤트를 통해 어느 칸에 있는지 판단하고 이벤트를 처리해도 되지만 표에 저장된 내용이 바뀌면 다시 조정해야 합니다
현재 칸의template에 다이얼로그 팝업 상자를 직접 써 보았습니다. 홈페이지의 예와 같습니다. 하지만 클릭할 때 여러 번 터치합니다(현재 페이지에 표시된 수량과 일치).
보충 지식:elementcell-click 사용 방법
나는 쓸데없는 말을 더 이상 하지 않겠다. 모두들 코드를 직접 보는 것이 좋겠다.

<el-table width="100%" border :data="Datalist" @cell-click="handle" >

methods: {
	handle(row,column,event,cell) {
	  console.log(row)
	  console.log(column)
	  console.log(event)
	  console.log(cell)
  }
}

상기 vue+elementui는table의 칸을 누르면 이벤트를 촉발합니다. 탄틀은 여러분께 공유된 모든 내용입니다. 참고해 주시고 저희를 많이 사랑해 주십시오.