https://github.com/kinglisky/...

可以看看這個是怎么封裝的

上面的評論好像都沒有關(guān)注重點，重點是要通過columns來定義列顯示，而不必改變自定義的組件本身?？戳艘幌耰view的源碼，它是將createElement方法傳到了columns的render方法里，通過vue的render渲染函數(shù)實現(xiàn)了組件內(nèi)容的自定義。下面把關(guān)鍵代碼貼一下。
自定義組件

 <el-table
    :data="tableData"
    stripe
    border
    stripe
    fit
    style="width: 100%"
    class="self-table"
  >
    <el-table-column
      v-for="(column, index) in columns "
      :label="column.label"
      :width="column.width"
      :key="index"
    >
      <template slot-scope="scope">
        <expand
          v-if="column.render"
          :render="column.render"
          :row="scope.row"
          :index="index"
          :column="column"
        >
        </expand>
        <span v-else>
          {{scope.row[column.prop]}}
        </span>
      </template>
    </el-table-column>
  </el-table>

expand組件

export default {
  name: 'TableExpand',
  functional: true,
  props: {
    row: Object,
    render: Function,
    index: Number,
    column: {
      type: Object,
      default: null,
    },
  },
  render: (h, ctx) => {
    const params = {
      row: ctx.props.row,
      index: ctx.props.index,
    }
    if (ctx.props.column) params.column = ctx.props.column
    return ctx.props.render(h, params)
  },
}

需要自定義時的columns

{
            prop: 'auther',
            label: '作者',
            width: '180',
            render: (h, params) => {
              return h('input', {
                style: {
                  width: '100%',
                  height: '30px',
                },
              })
            },
          },

我以前寫的時候，一般都是文字內(nèi)容可以自定義，但是html標(biāo)簽的話還是單獨寫出來

文檔中寫的清楚呢？沒仔細看吧！

<el-table :data="tableData">
<el-table-column
      fixed="right"
      label="操作"
      width="120">
      <template slot-scope="scope">
        <!-- 隨便你自定義，通過（scope.row）拿到當(dāng)前行數(shù)據(jù)-->
      </template>
    </el-table-column>
</el-table>

通過 Scoped slot 可以獲取到 row, column, $index 和 store（table 內(nèi)部的狀態(tài)管理）的數(shù)據(jù)。
寫個template，通過scope.row得到這一行的數(shù)據(jù)，在template寫html

<el-table-column  label="具體需求">
    <template slot-scope="scope">
        <div class="content-rowspan">
            <div v-for="(list,index) in scope.row.lists">
                <p v-show="scope.row.show">
                    {{list}}                                                       
                    <el-button  class="delelist" type="danger" size="small"  @click="delelist(tableData1,scope.$index,index)">刪除</el-button>
                </p>
                <el-input  type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-show="!scope.row.show" v-model="scope.row.lists[index]"></el-input>
            </div>            
            <div><el-button  size="small" type="primary" icon="plus" @click="addlist(tableData1,scope.$index)"></el-button></div>
        </div>
    </template>
</el-table-column>