kpt-pasture/src/views/components/selector/index.vue

<template>
  <div>
    <el-card class="box-card" style="margin:10px" v-for="(item,key) in dataLists" :key="key">
      <template #header>
        <div class="card-header">
          <span>{{item.title}}</span>
        </div>
      </template>
      <Selector :HsKey="key" :echo="item.echo" @selectedVal="selectedVal" :disabled="item.disabled" />
      <h4 v-if="!item.disabled">选中范围：{{ selectRange }}</h4>
    </el-card>
  </div>
</template>

<script lang='ts'>
import { ref } from "vue";
import Selector from "/@/components/selector";

export default {
  components: { Selector },
  setup() {
    let selectRange = ref(null);
    let dataLists = ref([
      {
        title: "基本使用",
        echo: [],
        disabled: false,
      },
      {
        title: "回显模式",
        echo: [2, 7],
        disabled: true,
      },
    ]);

    const selectedVal = ({ left, right, whole }) => {
      selectRange.value = `${left}-${right}`;
    };

    return {
      selectedVal,
      selectRange,
      dataLists,
    };
  },
};
</script>