修改el-select 宽度数据回显搜索本表

是貔貅喔

已于 2023-02-09 13:45:23 修改

阅读量193

点赞数

文章标签： 1024程序员节

于 2022-10-24 15:02:18 首次发布

本文链接：https://blog.csdn.net/weixin_46087919/article/details/127492938

版权

修改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>