<template>
  <el-dialog
    title="过期提示"
    :visible.sync="visible"
    width="60%"
    v-dialogDrag
    :before-close="cancel"
  >
    <el-table border :data="tableData" style="min-height: 350px" max-height="500px">
      <el-table-column prop="id" width="80px" label="序号" align="center">
      </el-table-column>
      <el-table-column prop="title" label="内容" align="center">
        <template slot-scope="scope">
          <span style="color: #F56C6C">{{scope.row.title}}</span>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: () => false
    },
  },
  data() {
    return {
      expireList: [],
    };
  },
  computed: {
    tableData(){
      return this.expireList.map((item,index) => ({
          id: index+1,
          title: item,
        }))
    }
  },
  methods: {
    cancel() {
      this.$emit("cancel");
    }
  }
};
</script>

<style></style>
