vue+element ui 的表格列使用組件

前言：工做中用到 vue+element ui 的前端框架，有這個場景：不少表格的列有許多同樣的，因此考慮將列封裝爲組件。轉載請註明出處：https://www.cnblogs.com/yuxiaole/p/9530781.html

網站地址：個人我的vue+element ui demo網站 

github地址：yuleGH github

代碼以下：

　　這裏有兩種方式讓表格使用組件

    <el-table :data="tableData" style="width: 100%">

        <!--下拉框列的組件-->
        <my-select-column :select-options="selectOptions" key-field="selectOption"></my-select-column>

        <!--輸入框的組件-->
        <el-table-column label="備註" width="180">
            <template slot-scope="scope">
                <my-input :key-field.sync="scope.row.remark"></my-input>
            </template>
        </el-table-column>     

    </el-table>

　　js

<!--主 js-->
<script type="text/javascript">
    window.onload = function(){
        new Vue({
            el: "#app",
            data: {
                printStr: "",

                selectOptions : [
                    {value : "1", label : "選擇一"},
                    {value : "2", label : "選擇二"},
                    {value : "3", label : "選擇三"},
                ],

                tableData: [{
                    date: '2000-10-27',
                    name: '餘小樂',
                    address: '北京',
                    isRich: false,
                    remark : "我是備註",
                    selectOption : "2",
                    sex : "0"
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀區金沙江路 1517 弄',
                    isRich: true,
                    remark : "",
                    selectOption : "",
                    sex : "1"
                }, {
                    date: '2016-05-01',
                    name: '小花',
                    address: '重慶市璧山區',
                    isRich: true,
                    remark : "",
                    selectOption : "",
                    sex : "0"
                }, {
                    date: '1998-05-03',
                    name: '二哈',
                    address: '成都',
                    isRich: false,
                    remark : "",
                    selectOption : "",
                    sex : "1"
                }]
            },
            components : {
                'my-select-column' : myComponents.mySelectColumn,
                'my-input' : window.myComponents.myInput
            },
            methods: {
                handleEdit(index, row) {
                    this.printStr = "點擊編輯；index=" + index + "；row=" + JSON.stringify(row);
                },
                handleDelete(index, row) {
                    this.printStr = "點擊刪除；index=" + index + "；row=" + JSON.stringify(row);
                },
                getTabelData(){
                    this.printStr = "表格數據：" + JSON.stringify(this.tableData);
                }
            }
        });
    };
</script>

　　下拉框列的組件

<!--表格列組件-->
<div id="mySelectColumn">
    <el-table-column label="選擇欄" width="200">
        <template slot-scope="scope">
            <el-select clearable placeholder="請選擇" v-model="scope.row[keyField]">
                <el-option
                        v-for="item in selectOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </template>
    </el-table-column>
</div>
<script type="text/javascript">
    var getSelectColumn = function () {
        var component = {
            template: document.querySelector("#mySelectColumn").innerHTML,
            data: function () {
                return {}
            },
            // 聲明 props
            props: {
                selectOptions: {
                    type: Array,
                    required: true
                },
                keyField : {
                    type : String,
                    required: true
                }
            },
            watch: {},
            methods: {}
        };

        return component;
    };

    window.myComponents = {
        mySelectColumn: getSelectColumn()
    };
</script>

　　輸入框的組件

<!--輸入框組件-->
<div id="myInput">
    <el-input v-model="curKeyField" placeholder="請輸入備註"></el-input>
</div>
<script type="text/javascript">
    var getInputComponent = function () {
        var component = {
            template: document.querySelector("#myInput").innerHTML,
            data: function () {
                return {
                    curKeyField : this.keyField
                }
            },
            // 聲明 props
            props: {
                keyField : {
                    type : String,
                    required: true
                }
            },
            watch: {
                keyField : function(newVal, oldVal){
                    this.curKeyField = newVal;
                },
                curKeyField : function(newVal, oldVal){
                    this.$emit("update:keyField", newVal);
                }
            },
            methods: {}
        };

        return component;
    };

    window.myComponents.myInput = getInputComponent();
</script>

完。總體代碼見 GitHub。

表格頭使用自定義：https://www.jb51.net/article/137320.htm

 

轉載請註明出處：https://www.cnblogs.com/yuxiaole/p/9530781.html