改变el-dialog的宽度的解决办法

改变el-dialog的宽度的解决办法

<el-dialog title="校区" :visible.sync="dialogFormVisibleXiaoqu" @close="closeDialog">
     <el-form :inline="true">
          <el-form-item label :label-width="formLabelqudaoWidth">
            <el-select v-model="info.schoolname" placeholder="校区" @change="setXiaoquinfo">
              <el-option  v-for="item in ltcdata"  :key="item.value"  :label="item.schoolname" :value="item"  />
            </el-select>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleXiaoqu = false">取 消</el-button>
          <el-button type="primary" @click="updateXiaoquInfo()">确 定</el-button>
      </div>
</el-dialog>

width=“45%”,但经设置后，发现没起任何作用。最终使用在el-dialog增加了一个customClass,

<el-dialog customClass="customWidth"></el-dialog>

然后再::deep, 给样式

<style scoped>
::deep .customWidth {
     width: 45%;
}
</style>

这样就可以了.关于deep的特性有时间我会再详细讨论.