前端封装动态表格组件

// html内容
    <div>
        // 查询数据
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="ID:">
                <el-input v-model="form.id"></el-input>
            </el-form-item>
            <el-form-item label="名字:">
                <el-input v-model="form.name" ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        // 动态表格
        <el-table class="table" ref="editInput" :data="tableData" border @cell-click="cellClick" :row-class-name="tableRowClassName" :cell-class-name="tableCellClassName" :header-cell-style="{ background: '#c3d7df' }" :cell-style="cellStyle">
            <template v-for="(item, index) in tableDataHeader">
                // 这个是动态的竖向表头，如果没有竖向表头的要求也可以不加上
                <el-table-column v-if="shouldShow(index)" align="center" :label="item.label" :key="index" :prop="item.prop">
                </el-table-column>
                <el-table-column v-else align="center" :label="item.label" :key="`asdf_${index}`">
                    <template slot-scope="scope">
                        <el-input v-if="scope.row.index === rowIndex && scope.column.index === columnIndex"
                            v-model="scope.row[`${item.prop}`].value" @blur="inputBlur(scope.row)"
                            v-focus></el-input>
                        <div v-else>
                            {{ scope.row[`${item.prop}`].value==null? scope.row[`${item.prop}`].defval: scope.row[`${item.prop}`].value}}
                        </div>
                        
                    </template>
                </el-table-column>
            </template>
        </el-table>
    </div>

//  script内容
    export default {
        data() {
            return {
                tableDataHeader: [
                   {
                     id:1，
                     label:"日期"，
                     // 表格名字，用来判断竖向标题
                     name:table1,
                     prop:"date"
                    },
                    {
                     id:2，
                     label:"名字"，
                     // 表格名字，用来判断竖向标题
                     nameTable:table1,
                     prop:"name"
                    },
                    {
                     id:3，
                     label:"地址"，
                     // 表格名字，用来判断竖向标题
                     nameTable:table1,
                     prop:"address"
                    },
                ],
                 tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                  }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                  }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                  }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                  }]
                rowIndex: -1, //行索引
                columnIndex: -1, //列索引
                form: {
                    id:'',
                    name:'',
                   },
        }
    },
    created() {
        this.getText()
    },
    // 自定义点击指令
    directives: {
        focus: {
          inserted: function (e) {
              e.querySelector("input").focus();
            },
        },
    },
    methods: {
        //  调用后端接口，获取查询到的数据
        getText()
          getdataList(this.form).then((res) => {
            this.tableDataHeader = res.data.tableHead
            this.tableData = res.data.tableData 
           });
        },  
        // 根据条件查询表格
        onSubmit() {
          this.getText();
        },
        
        // 竖向表头判断
        shouldShow(index) {
            switch (this.tableDataHeader[0].nameTable) {
                // 名字为table1 的表格只有第一列是竖向表头
                case 'table1':
                  return  index === 0;
                // 名字为table2 的表格除了第三列，其余列都是竖向表头
                case 'table2':
                  return  index !== 2;
                default:
                    break;
            }
            
        },
        // 把每一行的索引加到行数据中
        tableRowClassName({ row, rowIndex }) {
            row.index = rowIndex
        },

        // 把每一列的索引加到列数据中
        tableCellClassName({ column, columnIndex }) {
            column.index = columnIndex
        }, 

        // 单元格被点击时会触发该事件
        cellClick(row, column, cell, event) {
            this.rowIndex = row.index
            this.columnIndex = column.index
            setTimeout(() => {
                this.$refs['editInput'][0].focus()
            }, 10);
        },

        // 输入框失去焦点事件（初始化中间变量）
        inputBlur(scope) {
            this.rowIndex = -1
            this.columnIndex = -1
        },

        // 对单元格进行一下样式调整
        cellStyle({row, column, rowIndex, columnIndex}){
            if (rowIndex%2!==0) {
                return "background-color: #ecf5ff"
            }
        },
    }

}
</script>