Modify element component style El-Transfer modify width

The default width of El-Transfer is 200px and it cannot be fully displayed when the content is longYou need to modify the width of this component

The approach is to locate the component by its outer class or ID and use >>> style penetration.

In the el-Transfer coat, a div class is edit_dev

        <div class="edit_dev">
          <el-transfer
            v-loading="transLoading"
            filterable
            filter-placeholder="Search"
            v-model="value"
            :data="transData"
            :titles=[' not selected ', 'selected ']">
          </el-transfer>
        </div>
Copy the code

Add style note scoped it will not work without scoped

<style scoped>
   .edit_dev >>> .el-transfer-panel {
     width:350px;
   }
</style>
Copy the code

Effect of implementation

Refer to the link www.jianshu.com/p/506fe5057… Thank you