Table案例-组件、插槽、自定义指令

1.请求商品列表的数据

//商品列表数据
const goodslist = ref([]);
const getGoodsList = async () => {
  const res = await axios.get("https://www.escook.cn/api/goods");
  // console.log(res);
  if (res.status !== 200) return console.log("获取商品列表数据失败！");
  goodslist.value = res.data.data;
};
watchEffect(() => {
  getGoodsList();
});

2.封装MyTable组件

//1.用户通过defineProps为MyTable.vue组件指定数据源
//2.在MyTable组件中，预留名称为header的具名插槽
//3.在MyTable.vue中，预留名称为body的作用域插槽

<script setup>
defineProps({
  data: Array,
  default: [],
});
</script>

<template>
  <div class="home container">
    <table class="table table-bordered table-striped">
      <!-- 标题区域 -->
      <thead>
        <tr>
            <!-- 具名插槽 -->
          <slot name="header"></slot>          
        </tr>
      </thead>
      <!-- 内容主体区域 -->
      <tbody>
        <!-- 作用域插槽 -->
        <tr v-for="item in data" :key="item.id">
          <slot name="body" :row="item"></slot>
        </tr>       
      </tbody>
    </table>
  </div>
</template>

//在App.vue中
// v-slot:header  等价于#header
<template>  
  <MyTable :data="goodslist">
    <template #header>
      <th>序号</th>
      <th>商品名称</th>
      <th>价格</th>
      <th>标签</th>
      <th>操作</th>
    </template>
    
    <template #body="{ row }">
      <td>{{ row.id }}</td>
      <td>{{ row.goods_name }}</td>
      <td>￥{{ row.goods_price }}</td>
      <td>{{row.tags}}</td>        
      <td>
        <button
          type="button"
          class="btn btn-danger btn-sm">       
         删除
        </button>
      </td>         
    </template>
  </MyTable>
</template>

3.实现删除功能

<template>
  <MyTable :data="goodslist">
    <template #header>
      <th>序号</th>
      <th>商品名称</th>
      <th>价格</th>
      <th>标签</th>
      <th>操作</th>
    </template>

    <template #body="{ row }">
      <td>{{ row.id }}</td>
      <td>{{ row.goods_name }}</td>
      <td>￥{{ row.goods_price }}</td>
      <td>{{ row.tags }}</td>
      <td>
        <button
          type="button"
          class="btn btn-danger btn-sm"
          @click="onRemove(row.id)"
        >
          删除
        </button>
      </td>
    </template>
  </MyTable>
</template>

//根据id删除商品
const onRemove = (id) => {
  // console.log(id);
  //过滤出来（要显示的）数据的id不等于要删除的id
  goodslist.value = goodslist.value.filter((x) => x.id !== id);
};

4.循环渲染tag标签

<td>  
       <!-- 循环渲染标签信息 -->
        <el-tag
          type="warning"
          class="mx-1"
          effect="dark"
          v-for="item in row.tags"
          :key="item"
        >
          {{ item }}
        </el-tag>       
</td>

5.在标签中实现input和button

//v-if="row.inputVisible"则展示输入框，默认情况下为false，即展示 +tag，而不出现输入框
//v-model.trim="row.inputValue" 输入框中的值
//@blur="onInputConfirm(row)" 失去焦点时，触发此事件

const onInputConfirm = (row) => {
  const val = row.inputValue;
  row.inputValue = "";
  row.inputVisible = false;//失去焦点之后，自动隐藏输入框
  // 当val为空且值已经存在  row.tags.indexOf(val) ===-1说明不存在
  if (!val || row.tags.indexOf(val) !== -1) return;
  row.tags.push(val);
};

<el-input v-model.trim="row.inputValue" placeholder="Please input" v-if="row.inputVisible" @blur="onInputConfirm(row)" @keyup.enter="onInputConfirm(row)" @keyup.esc="row.inputValue=''"/>
<el-button type="success" size="small" v-else @click="row.inputVisible=true">+tag</el-button>