看完这篇能解决一些关于element ui table控件的使用常见问题，如table中自定义a标签，列中加入复选框或者序号列，时间控件的格式问题等

 在script中加入

var app = new Vue({
        el: '#app',
        data: function () {
            return { itemList:[],}
 },

created: function() {
    //初始化你的table数据
    this.itemList=你的list数据
},
methods: {
submitForm: function (formName) {
  //
},
resetForm: function (formName) {
    this.$refs[formName].resetFields();
}
}

}

 

 以下为在table数据中加入a标签

<el-table-column prop="compCode" label="操作" width="170" align='center'>

    <%--<template slot-scope="itemList">--%>
    <%--</template>--%>
    <template slot-scope="itemList">
        <a v-if="itemList.row.OmsNo!=null" target="_blank" :href="'print.html?rohOmsNo='+itemList.row.rohOmsNo">打印</a>
        <a v-if="itemList.row.Code=='TS'" :href="'gotoUpload.html?Code='+itemList.row.rohCode+'&businessType='+itemList.row.Type">上传</a>
        <a v-if="itemList.row.Code=='WA'|| itemList.row.Code=='D'" :href="'download.html?rohCode='+itemList.row.Code+'&Type='+itemList.row.Type"
        target="_report">下载</a>
    </template>
</el-table-column>

效果如下

 

在列中加入 复选框checkbox和序号列，其中两者区别在于，type，请看以下代码

<el-table :data="itemList"  @selection-change="handleSelectionChange" style="width: 100%">
    <el-table-column  type = 'selection' width="28" align='right'></el-table-column>
        <el-table-column  type = 'index' label="序号" width="49" align='center'></el-table-column>
</el-table>

再者这里需要在方法中加入

handleSelectionChange:function(val) {
    this.checkList=val;
    console.log(this.checkList)
}

此时可得到如下图效果，注意控制台打印我箭头所示位置，你所选择几个，这里打印的val就是几个，至于里面内容，就是你table遍历的list里面的对象，也就是说你选择一个，就选中了table一列的数据，可自copy我之优秀代码自行验证之

 

时间空如何在列中展示yy-MM-DD 这种格式的时间，此时需要借助common.js,且看以下代码

<script src="/moment.js"></script>

<el-table-column prop="rohCreatedate"  :formatter="dateFormat" label="创建时间" width="157" align='center'></el-table-column>

此时还需要在方法中加入如下几行，才能发挥作用

dateFormat:function(row,column){

    var date = row[column.property];

    if(date == undefined){return ''};

    return moment(date).format("YYYY-MM-DD HH:mm:ss")

}

 

可得如下结果

 

如果有帮助请点赞

如有问题请留言

如果喜欢请关注