vue3+element-plus之自定义表格

最新推荐文章于 2025-04-07 15:00:32 发布

少年包青菜

最新推荐文章于 2025-04-07 15:00:32 发布

阅读量1.2k

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/m0_50884068/article/details/126460272

版权

这篇博客展示了如何利用Vue.js和TypeScript创建一个包含编辑和删除操作的表格组件。内容包括定义表格列、数据及操作按钮，并通过`EditBtn`和`DeleteBtn`方法处理用户交互。示例中，当姓名属性为'王小虎'时，会显示特殊信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-table :data="tableData" border height="330" style="width: 100%;">
        <el-table-column
            v-for="item in Columns"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            align="center"
        >
          <template #default="scope">
            <div v-show="item.prop==='operate'">
              <el-button size="small" type="primary" link @click="EditBtn(scope.row,scope.$index)">编辑</el-button>
              <el-button size="small" type="danger" link @click="DeleteBtn(scope.row,scope.$index)">删除</el-button>
            </div>
            <div v-if="item.prop==='name'">{{scope.row.name==='王小虎'?'是':'否'}}</div>
            <div v-else>{{scope.row[item.prop]}}</div>
          </template>
        </el-table-column>
      </el-table>

<script setup lang="ts">
const Columns=ref([
  {
    prop: "date",
    label: "日期",
  },
  {
    prop: "name",
    label: "姓名",
  },
  {
    prop: "address",
    label: "地址",
  },
  {
    prop:'operate',
    label:'操作',
  }
])
const tableData=ref([
  {
    date: "2016-05-02",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1518 弄",
  },
  {
    date: "2016-05-04",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1517 弄",
  }
])
const EditBtn=(row:any,index:any)=>{
  console.log(row,index)
}
const DeleteBtn=(row:any,index:any)=>{
  console.log(row,index)
}
</script>