Element table 对单元格的数据格式化
后端返回的数据列表中时间格式为时间戳，在前端显示的时候需要对数据进行格式化。在使用element的table的时候，对单元格值进行格式化的方法，可以使用formatter。
<template>
<el-table :data="list" style="width: 100%">
<el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="left" block class="demo-table-expand">
<el-form-item label="分类ID"><span>{{ props.row.id }}</span></el-form-item>
<el-form-item label="User ID"><span>{{ props.row.uid }}</span></el-form-item>
<el-form-item label="分类名称">
<span><el-input name="name" v-model="props.row.name" inline size="mini"
placeholder="请输入分类名称"></el-input></span>
</el-form-item>
<el-form-item label="显示顺序">
<span><el-input name="sort" v-model="props.row.sort" inline size="mini"
placeholder="请输入数字"></el-input></span>
</el-form-item>
<el-form-item label="创建时间"><span>{{ new Date(props.row.create_at*1000).Format('yy-MM-dd hh:mm:ss') }}</span></el-form-item>
<el-form-item label="更新时间"><span>{{ new Date(props.row.update_at*1000).Format('yy-MM-dd hh:mm:ss') }}</span></el-form-item>
<el-form-item class="el-form-item-button-box">
<el-button type="primary" :id="props.row.id" :index="props.$index"
@click="saveChanges">Save Changes
</el-button>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="分类 ID" prop="id"></el-table-column>
<el-table-column label="分类名称" prop="name"></el-table-column>
<el-table-column label="顺序" prop="sort"></el-table-column>
<el-table-column label="上次更新" prop="udpate_at" :formatter="format_row_timestamp"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
current_page: '1',
total_page: '',
list: []
}
},
methods: {
handleTabClick(tab, event) {
console.log(tab)
},
format_row_timestamp(row, column, cellValue, index){
return new Date(row.update_at*1000).Format('yy-MM-dd hh:mm:ss')
}
}
}
</script>
el-table :data 为需要显示的数据列表;
<template slot-scope="props"> 官方解释是作用域插槽; 具体用法就参照上面的代码，props这个值可以随便定义。
<el-button type="primary" :id="props.row.id" :index="props.$index" @click="saveChanges">Save Changes</el-button> 这行代码中取了数组的索引，在保存修改的时候，可以根据索引快速从原数据中找出当前修改的行数据。
<el-table-column label="上次更新" prop="udpate_at" :formatter="format_row_timestamp"></el-table-column> 这个标签中：prop是指定使用哪个字段来显示这一列，:formatter后的参数是一个方法，这个方法会接收四个参数，script代码中的methods部分。