Element-plus使用总结

Dialog 对话框 （Antd 称为 Modal）

// 父组件
<template>
  父组件的计数器：{{count}}
  <br/>
  <el-button plain @click="dialog1Visible = true">组件内不需要状态, 没有自定义关闭按钮</el-button>
  <el-button plain @click="dialog2Visible = true">组件内需要状态, 有自定义关闭按钮</el-button>
  <el-button plain @click="dialog3Visible = true">组件内需要状态另一种写法, 有自定义关闭按钮</el-button>

  <dialog-1 v-if="dialog1Visible" v-model="dialog1Visible"/>
  <dialog-2 v-if="dialog2Visible" v-model="dialog2Visible" v-model:countAdd="count" />
  <dialog-3 v-if="dialog3Visible" v-model="dialog3Visible" />
</template>

<script setup>
import { ref } from 'vue';
import Dialog1 from './Dialog1.vue';
import Dialog2 from './Dialog2.vue';
import Dialog3 from './Dialog3.vue';

const count = ref(100);
const dialog1Visible = ref(false);
const dialog2Visible = ref(false);
const dialog3Visible = ref(false);
</script>
});

// 子组件 Dialog1
<template>
  <el-dialog
    v-bind="$attrs"
    title="Tips"
    width="500"
  >
    <span>组件内部不使用visible数据源</span>
  </el-dialog>
</template>

<script setup>
  console.log('测试')
</script>

// 子组件 Dialog2
<template>
  <el-dialog
    :model-value="modelValue"
    title="Tips"
    width="500"
    @close="hide"
  >
    <span>组件内部使用visible数据源 {{countAdd}}</span>
    <el-button @click="changeVmodal">Cancel</el-button>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="hide">Cancel</el-button>
        <el-button type="primary" @click="hide">Confirm</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref} from 'vue'
const props = defineProps({
  modelValue: Boolean,
  countAdd:Number
});
const count = ref(0)
const emit = defineEmits(['update:modelValue','update:countAdd']);
const changeVmodal =()=>{
  emit('update:countAdd', count.value++ )
}
function hide() {emit('update:modelValue', false)}
</script>

// 子组件 Dialog3
<template>
  <el-dialog
    v-model="visible"
    title="Tips"
    width="500"
  >
    <span>组件内部使用visible数据源, 但是可以直接修改值, 而不使用用emit事件</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="hide">Cancel</el-button>
        <el-button type="primary" @click="hide">Confirm</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed } from 'vue';
console.log('测试3')
const props = defineProps({
  modelValue: Boolean,
});

const emit = defineEmits(['update:modelValue']);

const visible = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    console.log(val)
    emit('update:modelValue', val);
  }
})

function hide() {
  visible.value = false;
}
</script>

分页组件 Pagination

// 分页为组件
<script setup lang="ts">
interface Props {
    total: number;
}

defineProps<Props>();
</script>

<template>
    <el-pagination
        :hide-on-single-page="total === 0"
        :total="total"
        :page-sizes="[10, 20, 50, 100]"
        background
        layout="sizes, prev, pager, next"
    />
</template>

<style lang="scss" scoped>
.el-pagination {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
    .el-pager {
        .is-active {
            background-color: #2385EC !important;
        }
    }
}
</style>

// 父组件里使用
<template>
  <PaginationCom
    v-model:current-page="pageQuery.pageNo"
    v-model:page-size="pageQuery.pageSize"
    :total="total"
    layout="total, sizes, prev, pager, next"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange" />
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue';

const pageQuery = reactive({
  page: 1,
  pageSize: 10,
});
const handleSizeChange = val => {
  pageQuery.pageSize = val;
};
const handleCurrentChange = val => {
  pageQuery.page = val;
};
</script>

Select 下拉框

<script steup>
import { ref, onMounted } from 'vue';

const value = ref([]); // 多选的时候默认为数据 单选就字符串 || null 
const options = ref([
  { label: '1', value: '1' },
  { label: '2', value: '2' },
  { label: '3', value: '3' },
]);
</script>
<template>
    <el-select
      v-model="value"
      placeholder="placeholder"
      @change="change"
      clearable // 清除按钮
      multiple // 多选
      filterable // 搜索
      :disabled="false">
      <slot name="slotName" v-if="options.value.length === 0"></slot> //
      <template v-else>
        <el-option
          v-for="(option, index) in options"
          :key="index"
          :label="option.label"
          :value="option.value" />
      </template>
     </el-select>
 </template>