element plus vue3 typescript组件操作写法--持续整理中

tt小呆熊

已于 2023-09-27 21:42:35 修改

阅读量139

点赞数

文章标签： typescript vue.js 前端

于 2023-09-27 21:20:20 首次发布

本文链接：https://blog.csdn.net/qq_27602491/article/details/133363793

版权

1、获取当前页面代理
 const { proxy } = getCurrentInstance() as ComponentInternalInstance
使用
  // 返回值给调用页面的@backEventListen绑定的函数
  proxy?.$emit('callBackEvent', ids);
  // 直接返回给v-model绑定的值
  proxy?.$emit('update:id', ids);
//弹出提示框
  proxy?.$modal.msgError('请选择要分配的用户');
  proxy?.$modal.msgSuccess('分配成功');

2、子组件和父组件双向绑定
1)父组件写法：v-model:id
  <select-user :sType="stype" v-model:id="userInfo.ids" @callBackEvent="printIds"></select-user>
2)子组件写法：先定义prop接收，再用update:id方式双向绑定
  const pros=defineProps({
    id: {
      type: String,
      default: ''
    }
  })
。。。。。。。。。。。。。。。。。。
// 直接返回给v-model绑定的值
proxy?.$emit('update:id', ids);

3、获取el-tree组件及使用
//引入
import { ElTree } from 'element-plus'
//定义，deptTree即组件的ref
const deptTree = ref<InstanceType<typeof ElTree>>();
//使用
deptTree.value?.getCheckedNodes()
deptTree.value?.setCheckedNodes([data]);

4、全局定义组件：main.ts
// 自定义组件
import SelectUser from '@/components/SelectUser/index.vue';
import SelectDept from '@/components/SelectDept/index.vue';
app.component('select-user', SelectUser);
app.component('select-dept', SelectDept);

5、表单form和table组件
const deptTableRef = ref<ElTableInstance>();
const queryFormRef = ref<ElFormInstance>();
deptTableRef.value?.toggleRowExpansion(item, status)
deptFormRef.value?.resetFields();

6、solt使用直接用template替代了
<el-dialog title="人员选择" v-model="dialog.visible" width="500px" destroy-on-close append-to-body>
      <el-tree
        ref="deptTree"
        :data="data"
        show-checkbox
        default-expand-all
        node-key="id"
        :default-checked-keys="checkedData"
        highlight-current
        :props="defaultProps"
        @check-change="handleClick"
      >
      // 原先用的solt和solt-scope
        <template #default="{ node, data }">
          <span :class="data.icon"></span>
          <span>{{ node.label }}</span>
        </template>
      </el-tree>
      // footer写法变成这样
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="getCheckedNodes">确 定</el-button>
          <el-button @click="resetChecked">重置</el-button>
        </div>
      </template>

7、emit的简化写法
//调用组件时候绑定的回调函数
const emit = defineEmits(["ok"]);
emit('ok');

8、表单验证rules写法
const loginRules: ElFormRules = {
  tenantId: [{ required: true, trigger: "blur", message: "请输入您的租户编号" }],
  username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
  password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
  code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
};