el-table循环内有插槽
    		       		warning:
    		            这篇文章距离上次修改已过429天,其中的内容可能已经有所变动。
    		        
        		                
                在Vue中使用Element UI的<el-table>组件时,如果需要在循环内使用插槽,可以通过template标签结合v-for来实现。以下是一个简单的例子:
<template>
  <el-table :data="tableData">
    <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="操作" width="180">
      <template slot-scope="scope">
        <el-button size="small" @click="handleClick(scope.row)">查看</el-button>
        <!-- 这里可以根据需要插入更多的按钮或内容 -->
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: '王小虎', ... },
        // ... 更多数据
      ]
    };
  },
  methods: {
    handleClick(row) {
      console.log(row);
    }
  }
};
</script>在这个例子中,<el-table>组件的:data属性绑定了一个数组tableData,该数组中的每个对象都会被循环渲染成一行表格。<el-table-column>组件用于定义表格的列,其中包含了两个固定列和一个操作列,操作列使用了作用域插槽scope来动态渲染每行的操作按钮。
评论已关闭