<template>
  <el-table :data="tableData" @selection-change="selectionChange">
    <el-table-column
      :prop="item.prop"
      :label="item.label"
      :width="item.width"
      v-for="(item, index) in tableColumn"
      :key="index"
    />
    <el-table-column fixed="right" label="操作" width="220" v-if="operations">
      <template #default="scope">
        <el-button type="primary" link size="small" @click="editClick(scope.row)" v-if="hasEdit">编辑</el-button>
        <el-button type="primary" link size="small" @click="delClick(scope.row)" v-if="hasDel">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
//表格字段类型
interface columnType {
  prop: string;
  label: string;
  width?: string|undefined;
}
defineProps({
  tableColumn: Array<columnType>, //表格字段
  tableData: Array, //表格数据
  operations: {
    //操作是否显示
    type: Boolean, // 参数类型
    default: false //默认值
  },
  hasEdit: {
    //修改是否显示
    type: Boolean, // 参数类型
    default: false //默认值
  },
  hasDel: {
    //删除是否显示
    type: Boolean, // 参数类型
    default: false //默认值
  }
});
const emit = defineEmits(['editClick', 'delClick']);
//多选
const selectionChange = (row: any) => {
  emit('delClick', row);
};
//修改
const editClick = (row: any) => {
  emit('editClick', row);
};
//删除
const delClick = (row: any) => {
  emit('delClick', row);
};
</script>

<style scoped></style>
