Vue2.0封装Element-UI的table组件，实现自定义渲染

Question

页面调用

<my-table :tableData="tableData" :columns="columns" @scopeData="getScopeData"></my-table>

<script>
    export default{
        data(){
            return {
                   columns:[
                    { prop : 'title' , label: '标题' },
                    { prop : 'create_name', label: '发布人'},
                    { prop : 'item_name', label: '栏目'},
                    { prop : 'create_time', label: '创建时间'},
                    { prop : 'weight', label: '权重'},
                    { prop : 'isoriginal', label: '原创',render:function(){
                        return '' // if isoriginal == 1 原创 else 非原创
                    }},
                    { prop : '', label: '操作',render: function(){
                          return '<button>删除</button>'
                    }}
                  ]
            }
        }
    }
</script>

封装的MyTable组件

<template>
    <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%;text-align:center"
        :header-cell-style="headerStyle">
        <el-table-column
            v-for="(column, index) in columns"
            :prop="column.prop"
            :key="index"
            :label="column.label">
            <template slot-scope="scope">
                <my-render v-if="column.render" :row="scope.row" :render="column.render"></my-render>
                <span v-else>
                  {{scope.row[column.prop]}}
                </span>
            </template>
        </el-table-column>
    </el-table>
</template>

MyRender组件

<template>
  <div ref='renderContent'>

  </div>
</template>

<script>
export default {
    props:{
        row: Object,
        render:Function
    },
    mounted(){
        this.$refs.renderContent.innerHTML = this.render()
    }
}
</script>

<style>

</style>

结果

能够渲染出html，但是因为在MyRender组件中无法得到scope.row的行数据，无法进行判断。是否原创字段无法渲染。

期望

能够根据行数据scope.row做出相应的变化,科科~~~

-----2018年1月13日15:49:04补充内容
希望能通过

 columns:[
                    { prop : 'title' , label: '标题' },
                    { prop : 'create_name', label: '发布人'},
                    { prop : 'item_name', label: '栏目'},
                    { prop : 'create_time', label: '创建时间'},
                    { prop : 'weight', label: '权重'},
                    { prop : 'isoriginal', label: '原创',render:function(){
                        return '' // if isoriginal == 1 原创 else 非原创
                    }},
                    { prop : '', label: '操作',render: function(){
                          return '<button>删除</button>'
                    }}
                  ]

这样的数据去控制列，效果就和jQueryDataTable一样

Answer 1

使用render函数，进行渲染

    {
          prop: "",
          label: "操作",
          render: (h, param) => {
            const dropDownData = {
              label: "操作",
              items: [
                { label: "修改", func: { func: "update", uuid: param.row.uuid } },
                { label: "删除", func: { func: "del", uuid: param.row.uuid } }
              ]
            };
            // 触发MyDropDown的update和del事件
            return h(MyDropDown, {
              props: { dropDownData: dropDownData },
              on: { update: this.update, del: this.del }
            });
          }
        }

其中,MyDropDown是我自己封装的下拉菜单组件,通过props传给组件值，on来监听触发的事件

MyDropDown组件

<template>
    <el-dropdown trigger="click" @command="handleCommand">
        <el-button type="primary">
            <span v-text="dropDownData.label"></span><i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown" >
            <el-dropdown-item :command="item.func"  v-text="item.label" v-for="(item,index) in dropDownData.items" :key="index"></el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>
</template>

<script>
export default {
  props: ["dropDownData"],
  methods: {
    handleCommand(command) {
      this.$emit(command.func, command.uuid);
    }
  }
};
</script>

这是一个简单的封装element-ui 的 dropDown组件，通过handleCommand方法触发事件

------2018年01月13日23:10:32 补充
render渲染函数代码也一起贴上来

<script>
export default {
  functional: true,
  props: {
    row: Object,
    render: Function
  },
  render: (h, ctx) => {
    return ctx.props.render(h, ctx.props.row);
  }
};
</script>

Answer 2

6666666