vue+element 学习之路（十一）表格中的模板引擎

今天在做表格的时候遇到的一个问题，就是在一列里面需要用到多个参数，或者需要调用方法等。翻阅了element文档中el-table的自定义列模板，给了我很大的帮助，下面总结一下自己的方法。

在这里期望城市的原生数据是为区域码，期望薪资列原生数据为纯数字

期望职位通过prop直接传入的方式即可

对于期望城市列表中，区域码需要转换为文字，这里需要调用到方法进行转换，使用模板引擎事半功倍。

slot-scope： 作用域插槽

ctt方法不要忘记return

另外记录一下本地json文件的引入方法和使用方法

此处有一个json文件，用于导入下拉列表中

存放位置

直接axios调用赋值

在下拉列表中v-for遍历即可

效果

源码：

<template>
    <div>
        <!-- 添加框 -->
        <el-form :model="jobIntention" ref="jobIntention">
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="期望职位" label-width="80px">
                        <el-input v-model="jobIntention.job"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="期望地点" label-width="80px">
                        <el-cascader
                            size="large"
                            :options="options"
                            v-model="selectedOptions"
                            @change="handleChange"
                            >
                        </el-cascader>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="期望薪资" label-width="80px">
                        <el-row>
                            <el-col :span="11">
                                <el-select v-model="jobIntention.moneyMin" @change="moneyMinChange()">
                                    <el-option 
                                        v-for="item in moneyMinOptions" 
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        ></el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="2" align="center">-</el-col>
                            <el-col :span="11">
                                <el-select v-model="jobIntention.moneyMax">
                                    <el-option
                                        v-for="item in moneyMaxOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-col>
                        </el-row>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-button type="primary" @click="insert()">添加</el-button>
            </el-row>
            <!-- 表格 -->
            <el-table :data="jobIntentionList"
                stripe 
                style="width:100%"
                >
                <el-table-column label="期望职位" header-align="center" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.job}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="期望城市" header-align="center" align="center">
                    <template slot-scope="scope">
                        {{ctt(scope.row.locationCode)}}
                    </template>
                </el-table-column>
                <el-table-column label="期望薪资" header-align="center" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.moneyMin == 'm'">
                            <span>面谈</span>
                        </div>
                        <div v-else-if="scope.row.moneyMin == 'n'">
                            <span>50K以上</span>
                        </div>
                        <div v-else>
                            <span>{{scope.row.moneyMin}}K</span>~<span>{{scope.row.moneyMax}}K</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作栏" header-align="center" align="center">
                    <template slot-scope="scope">
                        <el-button type="danger" @click="toDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-form>
    </div>
</template>

<script>
//地区级联插件
import { provinceAndCityData,CodeToText,TextToCode } from 'element-china-area-data';



export default {
    data(){
        return{
            options:provinceAndCityData,
            selectedOptions:[],
            moneyMinOptions:[],
            moneyMaxOptions:[],
            jobIntentionList:[],
            jobIntention:{
                id:'',
                userId:'',
                job:'',
                locationCode:'',
                moneyMin:'',
                moneyMax:''
            },
            editJobIntention:{},//编辑表单
        }
    },
    created:function(){
        this.jobIntention.userId = sessionStorage.getItem("userId");
        this.$axios.get('/static/moneyOptions.json').then(res=>{
            this.moneyMinOptions = res.data.result;
        })
        this.findList();
    },
    methods:{
        handleChange(value){
            this.jobIntention.locationCode = value[0]+"|"+value[1];
        },
        moneyMinChange(){
            var min = this.jobIntention.moneyMin;
            if(min == "m"||min=="n"){
                this.moneyMaxOptions = []
                //默认选择为空
                this.jobIntention.moneyMax="";
            }else{
                this.moneyMaxOptions[0]={"label":(Number(min)+1)+"K","value":(Number(min)+1)};
                this.moneyMaxOptions[1]={"label":(Number(min)+2)+"K","value":(Number(min)+2)};
                this.moneyMaxOptions[2]={"label":(Number(min)+3)+"K","value":(Number(min)+3)};
                //默认选择第一项
                this.jobIntention.moneyMax = Number(this.moneyMaxOptions[0].value);
            }
        },
        ctt(value){
            //切割赋值
            var arr = value.split("|");
            var text1 = CodeToText[arr[0]];
            var text2 = CodeToText[arr[1]];
            if(text2!=undefined){
                var text = text1+"-"+text2;
            }else{
                var text = text1;
            }
            return text
        },
        reset(){
            this.jobIntention.locationCode="";
            this.jobIntention.moneyMin="";
            this.jobIntention.moneyMax="";
            this.jobIntention.job="";
            this.selectedOptions=[];
        },
        findList(){
            this.$axios.post('/api/jobIntention/findList',this.jobIntention).then(res=>{
                if(res.data.success){
                    this.jobIntentionList = res.data.data;
                }
            })
        },
        insert(){
            this.$axios.post('/api/jobIntention/insert',this.jobIntention).then(res=>{
                if(res.data.success){
                    this.$message.success(res.data.msg)
                    this.reset();
                }else{
                    this.$message.error(res.data.msg)
                }

                this.findList();
            })
        },
        toDelete(value){
            this.$confirm('确认删除该记录?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.$axios.post('/api/jobIntention/delete',value).then(res=>{
                        if(res.data.success){
                            this.$message.success(res.data.msg)
                            this.findList();
                        }else{
                            this.$message.error(res.data.msg)
                        }
                    });
                }).catch(() => {
                    this.$message.info("已取消删除")
            });
        }
    }
}
</script>