el-table中每行嵌套的el-dialog

在el-table中嵌套el-dialog组件通常不是一个好的实践，因为这可能会导致访问性、可用性和可维护性问题。不过，如果你有特定的使用场景，下面是一个简单的示例，展示如何在el-table的每一行使用el-dialog。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button @click="handleDialogOpen(scope.$index, scope.row)">详情</el-button>
      </template>
    </el-table-column>
  </el-table>
 
  <el-dialog :visible.sync="dialogVisible" title="详细信息">
    <pre>{{ selectedRow }}</pre>
  </el-dialog>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: '王小虎', detail: '详细信息1' },
        { date: '2016-05-04', name: '李小虎', detail: '详细信息2' },
        // ...更多数据
      ],
      dialogVisible: false,
      selectedRow: null,
    };
  },
  methods: {
    handleDialogOpen(index, row) {
      this.selectedRow = row;
      this.dialogVisible = true;
    },
  },
};
</script>

在这个例子中，每行有一个按钮用来打开对应行的详细信息对话框。通过点击按钮，你可以将那一行的数据传递给el-dialog，并显示出来。这样做避免了在每一行中创建多个el-dialog实例，而是使用了单个el-dialog并根据需要显示不同的数据。