elementUI使用到的一些问题记录

elementui中的el-table中拼接两个列表字段

        <el-table-column prop="instock_count" label="总库存" width="200">
          <template #default="scope">
           {{ scope.row.instock_count }}{{scope.row.instock_unit}}
          </template></el-table-column
        >

在elementUI中使用 el-autocomplete 实现远程搜索的下拉框

//html代码

              <el-autocomplete
                class="inline-input"
                v-model="ruleForm.Pack_unit"
                :fetch-suggestions="querySearch"
                placeholder="包装单位"
                @select="handleSelect"
                style="width: 110px !important"
              ></el-autocomplete>

//js代码
export default {
  data() {
    return {
      ruleForm: {
        Packing: "", // 包装规格
      },
      Packunit: [],
    };
  },
  methods: {
    querySearch(queryString, cb) {
      let that = this;
      let results = that.Packunit;
      results = queryString
        ? results.filter(that.createFilter(queryString))
        : results;
      cb(results);
    },
    createFilter(queryString) {
      return (item) => {
        return item.value.toUpperCase().match(queryString.toUpperCase());
      };
    },
  mounted() {
    drugsGroups({}).then((res) => {
      if (res.data.status == 200) {
        let GroupsData = res.data.datas[4];
        for (let i in GroupsData) {
          this.Packunit.push({
            value: GroupsData[i].name,
            label: GroupsData[i].name,
          });
        }
      } else {
        that.$message({
          type: "info",
          message: res.data.msg,
        });
      }
    });
  },
};

element 验证表单（此包括验证手机格式，是否为空，以及通过后台接口验证是否重复注册）

      rules: {
        people_phone: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              if (
                /^1(3[0-9]|4[0-9]|5[0-9]|6[0-9]|7[0-9]|8[0-9]|9[0-9])\d{8}$/.test(
                  value
                ) == false
              ) {
                callback(new Error("手机号格式错误"));
              } else {
                logincheck({ user_name: value }).then((res) => {
                  if (res.data.status == 314) {
                    callback(new Error("该手机号已存在"));
                  } else {
                    callback();
                  }
                });
              }
            },
            trigger: "blur",
          },
        ],
        user_name: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              if (
                /^1(3[0-9]|4[0-9]|5[0-9]|6[0-9]|7[0-9]|8[0-9]|9[0-9])\d{8}$/.test(
                  value
                ) == false
              ) {
                callback(new Error("手机号格式错误"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        phone: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              if (
                /^1(3[0-9]|4[0-9]|5[0-9]|6[0-9]|7[0-9]|8[0-9]|9[0-9])\d{8}$/.test(
                  value
                ) == false
              ) {
                callback(new Error("手机号格式错误"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        user_pass: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              if (/^[0-9a-zA-Z]{8,}$/.test(value) == false) {
                callback(new Error("密码长度至少8位，可以由数字或字母组成"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        confirm_newpass: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              if (/^[0-9a-zA-Z]{8,}$/.test(value) == false) {
                callback(new Error("密码长度至少8位，可以由数字或字母组成"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },

 ElementUI 表格中某项为空值时用暂无数据代替

        <el-table :rules="rules" :data="tableData" border style="width: 100%">
          <el-table-column
            prop="express_name"
            label="快递名称"
            header-align="center"
          >
            <template v-slot="scope">
              {{ scope.row.express_name || "暂无" }}
            </template>
          </el-table-column>

        </el-table>

vue element表格某一列内容过多，超出省略号显示

<el-table-column prop="drug_name" label="药品名称" :show-overflow-tooltip='true'></el-table-column>

添加    show-overflow-tooltip  属性