如何动态渲染elementUI table的行和列

需求

近日项目中遇到这样一个需求：需要动态渲染一个列表的行和列，官网给出的例子大多是列写死的，行动态生成的，但是如何实现动态渲染行和列呢？后来我查询了一下实现了该功能，如下我将总结一下然后贴上代码。

实现

Talk is cheap,show me the code:

 <template>
  <div>
    <div class="retained">
      <el-card>
        <div class="dataList countFont">
          <div>
            <el-table
              border
              :data="dataList"
              style="width: 100%;">
              <el-table-column
                :show-overflow-tooltip="true"
                prop="data"
                width="180">
                <template slot-scope="scope" style="text-align: left">
                  <span>{
   {
   scope.row.data ? scope.row.data : '---'}}</span>
                </template>
              </el-table-column>
              <el-table-column
                sortable="custom"
                min-width="180"
                v-for="col in cols"
                :prop="col.prop" :label="col.label">
              </el-table-column>
            </el-table>
            <el-button @click="addCols">
              添加一列
            </el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>

  export default {
   
    data() {
   
      return {
   
        dataList: [
          {
   
            data: "2019-1-26",
            list0:1,