<el-table-column
prop="prefecture"
label="地州"
width="120"
:formatter="prefectureTran"
>
</el-table-column>
prop="prefecture"
: Set the attribute name of the column to "prefecture", and the corresponding field name in the data source to "prefecture".label="地州"
: Set the title of the column as "District and State" for display in the table header.width="120"
: Set the width of the column to 120px.:formatter="prefectureTran"
: Use:formatter
an attribute to bind a methodprefectureTran
as the formatting function of the column to customize the way the data is displayed.
data() {
return {
/* 地州选项 */
prefectureOptions: [
{value: 1, label: '乌鲁木齐'},
{value: 2, label: '克拉玛依'},
{value: 3, label: '吐鲁番'},
{value: 4, label: '哈密'},
],
}
}
/*内容转换*/
//地州
prefectureTran(row){
for (let i = 0; i < this.prefectureOptions.length; i++) {
if(row.prefecture == this.prefectureOptions[i].value){
return this.prefectureOptions[i].label;
}
}
},
Effect: