<template>
  <el-table
    :data="dataList"
    border
    stripe
    style="width: 100%; margin-top: 10px"
  >
    <el-table-column
      v-for="item of tableHead"
      :key="item.id"
      align="center"
      :prop="item.prop"
      :label="item.lable"
      :width="item.prop != 'content' && 180"
      v-bind="$attrs"
    ></el-table-column>
    <el-table-column label="操作" width="100" align="center">
      <template v-if="scope.row.userid" slot-scope="scope">
        <el-button type="text" size="small" @click="handleClick(scope.row)"
          >编辑</el-button
        >
        <el-button type="text" size="small" @click="delClick(scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'Table',
  componentName: 'Table',
  props: {
    dataList: {
      type: Array,
      default: () => []
    },
    tableHead: {
      type: Array,
      default: () => [
        { id: 0, lable: '内容', prop: 'content' },
        { id: 1, lable: '用户', prop: 'username' }
      ]
    }
  },
  methods: {
    handleClick(val) {
      this.$emit('upDateClick', val);
      this.$emit('up-date-click', val);
    },
    delClick(val) {
      this.$emit('delClick', val);
      this.$emit('del-click', val);
    }
  }
};
</script>
