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 属性