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

我用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框,有没有什么方法可以实现呢?

回答:

上面的评论好像都没有关注重点,重点是要通过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',
                },
              })
            },
          },

回答:

文档中写的清楚呢?没仔细看吧!

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

回答:

https://github.com/kinglisky/…

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

回答:

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

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注