Vue项目使用vant和element-ui组件库遇到的问题

这是我参与11月更文挑战的第10天，活动详情查看：2021最后一次更文挑战

vue+vant组件库，vant通过函数调用实现功能，函数前面要加vant.

例如图片预览功能

vant.ImagePreview(['https://img01.yzcdn.cn/vant/apple-1.jpg']);）

vue+vant组件库，移动端页面表单组件只显示一行的问题

表单组件要写成双标签，官网示例上是单标签

##官网上的：<van-field/>（单标签）

<van-form>
	<van-field v-model="form.username" label="收件人"/>
</van-form>

修改之后：<van-field>  </van-field>（双标签）
<van-form>
	<van-field v-model="form.username" label="收件人"></van-field>
</van-form>

级联选择器 el-cascader 数据列表内容高度过高超出屏幕

解决办法：

在全局样式中加入以下代码

/* 解决cascader级联样式表超出屏幕的问题 */

.el-cascader-panel {
    height: 210px;
}

滚动条 el-scrollbar 底下横向滚动条样式影响美观

解决办法：

在全局样式中加入以下代码

/* 隐藏横向滚动条 */

.el-scrollbar__wrap{
  overflow-x: hidden;
}

vant weapp 日历组件在页面上不显示，官方示例在json文件中没有引入van-cell组件，需要手动引入

{
  "usingComponents": {
    "van-calendar": "@vant/weapp/calendar/index",
    "van-cell": "@vant/weapp/cell/index"
  }
}

vant的组件，如果原组件设置了高度，自己想去掉高度,通过定义以下代码，覆盖原样式

height:auto !important; 

vue项目关闭eslint，在vue.config.js中加入配置：lintOnsave：false

module.exports = {
  publicPath: "./",
  assetsDir: "./",
  devServer: {
    proxy: {
      "/index.php": {
        // target: "http://model.net", // 
        // 配置跨域
        changeOrigin: true
      }
    }
  },
  css: {
    loaderOptions: {
      scss: {
        // 需要编译的写在这里，不需要编译的写在App.vue
        additionalData: `
                  @import "~@/assets/css/variable.scss";
                  @import "~@/assets/css/mixin.scss";
              `
      }
    }
  },
  lintOnSave: false
};

elementUi，el-table居中问题，align=“center“无效的解决方案：

  <el-table :data="tableConfig.value" 
              :cell-style="{ textAlign: 'center' }"		
              :header-cell-style="{textAlign: 'center'}" >

如何在 el-table 组件的每一行添加操作该行数据的按钮:使用自定义模板

<el-table-column label="操作">
  <template slot-scope="scope">
    <el-button @click="delete(scope.row)">删除</el-button>
  </template>
</el-table-column>