vue3+element-plus之自定义表格

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57