element table 组件 column内容如何自定义

Question

我用element封装了一个table组件。其中columns是从父组件传过来的

 <el-table
    :data="tableData"
    stripe
    border
    stripe
    fit
    style="width: 100%"
    class="self-table"
  >
    <el-table-column
      v-for="(column, index) in columns "
      :prop="column.prop"
      :label="column.label"
      :width="column.width"
      :key="index"
    >
    </el-table-column>
  </el-table>

现在我想通过直接控制columns，而不用改变上面这个自定义的组件，实现列内容的自定义，比如说单元格里面是一个可编辑的input框，有没有什么方法可以实现呢？

Answer 1

上面的评论好像都没有关注重点，重点是要通过columns来定义列显示，而不必改变自定义的组件本身。看了一下iview的源码，它是将createElement方法传到了columns的render方法里，通过vue的render渲染函数实现了组件内容的自定义。下面把关键代码贴一下。
自定义组件

 <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',
                },
              })
            },
          },

Answer 2

文档中写的清楚呢？没仔细看吧！

<el-table :data="tableData">
<el-table-column
      fixed="right"
      label="操作"
      width="120">
      <template slot-scope="scope">
        <!-- 随便你自定义，通过（scope.row）拿到当前行数据-->
      </template>
    </el-table-column>
</el-table>

Answer 3

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

可以看看这个是怎么封装的

Answer 4

我以前写的时候，一般都是文字内容可以自定义，但是html标签的话还是单独写出来

Answer 5

通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据。
写个template，通过scope.row得到这一行的数据，在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>