Vue2.0封裝Element-UI的table組件，實(shí)現(xiàn)自定義渲染

頁(yè)面調(diào)用

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

<script>
    export default{
        data(){
            return {
                   columns:[
                    { prop : 'title' , label: '標(biāo)題' },
                    { prop : 'create_name', label: '發(fā)布人'},
                    { prop : 'item_name', label: '欄目'},
                    { prop : 'create_time', label: '創(chuàng)建時(shí)間'},
                    { prop : 'weight', label: '權(quán)重'},
                    { prop : 'isoriginal', label: '原創(chuàng)',render:function(){
                        return '' // if isoriginal == 1 原創(chuàng) else 非原創(chuàng)
                    }},
                    { 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>

結(jié)果

能夠渲染出html，但是因?yàn)樵贛yRender組件中無法得到scope.row的行數(shù)據(jù)，無法進(jìn)行判斷。是否原創(chuàng)字段無法渲染。

期望

能夠根據(jù)行數(shù)據(jù)scope.row做出相應(yīng)的變化,科科~~~

-----2018年1月13日15:49:04補(bǔ)充內(nèi)容
希望能通過

 columns:[
                    { prop : 'title' , label: '標(biāo)題' },
                    { prop : 'create_name', label: '發(fā)布人'},
                    { prop : 'item_name', label: '欄目'},
                    { prop : 'create_time', label: '創(chuàng)建時(shí)間'},
                    { prop : 'weight', label: '權(quán)重'},
                    { prop : 'isoriginal', label: '原創(chuàng)',render:function(){
                        return '' // if isoriginal == 1 原創(chuàng) else 非原創(chuàng)
                    }},
                    { prop : '', label: '操作',render: function(){
                          return '<button>刪除</button>'
                    }}
                  ]

這樣的數(shù)據(jù)去控制列，效果就和jQueryDataTable一樣

回答

編輯回答

筱饞貓

使用render函數(shù)，進(jìn)行渲染

    {
          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 } }
              ]
            };
            // 觸發(fā)MyDropDown的update和del事件
            return h(MyDropDown, {
              props: { dropDownData: dropDownData },
              on: { update: this.update, del: this.del }
            });
          }
        }

其中,MyDropDown是我自己封裝的下拉菜單組件,通過props傳給組件值，on來監(jiān)聽觸發(fā)的事件

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>

這是一個(gè)簡(jiǎn)單的封裝element-ui 的 dropDown組件，通過handleCommand方法觸發(fā)事件

------2018年01月13日23:10:32 補(bǔ)充
render渲染函數(shù)代碼也一起貼上來

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

2017年12月10日 08:59