修改el-select 宽度 数据回显 搜索本表
修改el-select 选择框的长度
<el-col :lg="12">
<el-form-item label="所属公司" prop="companyId">
<el-select style="width:100%" v-model="form.companyId" placeholder="请选择公司名称">
<el-option v-for="item in datacompanyList" :key="item.id" :label="item.companyName" :value="item.id"></el-option>
</el-select>
</el-form-item>
</el-col>
数据回显 比如上面的所属公司
<el-table-column prop="companyId" label="所属公司" align="center">
<template slot-scope="scope">
<span>{{companyIdFormat(scope.row)}}</span>
</template>
</el-table-column>
--------------------------------------------------------------------------
<el-col :lg="12">
<el-form-item label="所属公司" prop="companyId">
<el-select style="width:100%" v-model="form.companyId" placeholder="请选择公司名称">
<el-option v-for="item in datacompanyList" :key="item.id" :label="item.companyName" :value="item.id"></el-option>
</el-select>
</el-form-item>
</el-col>
---------------------------------------------------------------------------
<script>
import{
listBCompanyInfo,
}from '@/api/factorys/bCompanyInfo.js';
export default {
name:
data() {
return {
datacompanyList: [],
}
}
-----------------------------------------------------------------------
methods: {
getCompanyList(){
this.loading = true;
listBCompanyInfo({pageNum: 1,pageSize: 100}).then(res => {
if (res.code == 200) {
this.datacompanyList = res.data.result;
}
})
},
--------------------------------------------------------------------------
// 公司名称字典翻译
companyIdFormat(row, column) {
return this.datacompanyList.filter(x=>x.id==row.companyId)[0]?.companyName;
},
</script>
搜索本表单 比如按名称搜索该工厂
<el-form :model="queryParams" size="small" label-position="right" inline ref="queryForm" :label-width="labelWidth" v-show="showSearch"
@submit.native.prevent>
<el-form-item label="工厂名称" prop="factoryName">
<el-select v-model="queryParams.factoryName" placeholder="请选择工厂" >
<el-option v-for="item in dataList" :key="item.id" :label="item.factoryName" :value="item.factoryName"></el-option>
</el-select>
</el-form-item>