Element-ui table表格的几种写法

默认写法

 <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>

自定义单元格写法

有slot-scope和v-slot两种插槽方式。都可用。后一种是vue2.6后新方式。

<el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column align="center" label="日期">
          <template slot-scope="scope">
            <span>{{ scope.row.date}}</span>
          </template>
        </el-table-column>
      <el-table-column align="center" label="姓名">
          <template v-slot:default="scope">
            <span>{{ scope.row.name}}</span>
          </template>
        </el-table-column>
    </el-table>