<template>
  <div class="tab_ex_container">
    <div style="height: 60px"></div>
    <h3>常规表格</h3>
    <ces-table
      class="r_yhgl_table"
      size="mini"
      :border="false"
      :headers="headers"
      :url="url"
      :searchShow="true"
      :addRowBtn="addRowBtn"
      :autoAdd="true"
      :isDialog="true"
      :isSelection="true"
      :isIndex="true"
      :confirmOptions="confirmOptions"
      :detailsUrl="detailsUrl"
      @primary-edit="editItem"
      :emptyText="emptyText"
      :stripe="true"
      :pageSizeShow="true"
    ></ces-table>
    <h3>可编辑表格，供服务测试用</h3>
    <ces-table
      class="r_yhgl_table"
      size="mini"
      :border="true"
      :headers="headers1"
      :url="url"
      :searchShow="false"
      :addRowBtn="false"
      :autoAdd="true"
      :isDialog="false"
      :isSelection="false"
      :isIndex="true"
      :confirmOptions="confirmOptions"
      :detailsUrl="detailsUrl"
      :radius="true"
      @primary-edit="editItem"
      :emptyText="emptyText"
      :stripe="false"
      :paginationShow="false"
      :pageSizeShow="false"
    ></ces-table>
  </div>
</template>

<script>
import cesTable from "@/components/table-um";
export default {
  data: () => ({
    headers: [
      { label: "服务url", prop: "date", type: "href", align: "left" },
      { label: "服务名称", prop: "name", type: "href", align: "center" },
      { label: "中文名", prop: "address", type: "href", align: "right" },
      {
        label: "操作",
        type: "Button",
        align: "center",
        btnList: [
          {
            type: "primary-edit",
            label: "编辑",
            line: "|"
          },
          {
            type: "primary-del",
            label: "删除"
          }
        ]
      }
    ],
    headers1: [
      { label: "服务url", prop: "date", type: "input", align: "center" },
      { label: "服务名称", prop: "name", type: "input", align: "center" },
      { label: "中文名", prop: "address", type: "input", align: "center" },
    ],
    url: "",
    detailsUrl: "ss/",
    addRowBtn: true,
    confirmOptions: {
      title: "提示", //提示
      message: "确认删除该条数据？", //""
      btnCancelText: "取消", //取消
      btnSubmitText: "确定" //确定
    },
    emptyText: "暂时没数据"
  }),
  components: {
    cesTable
  },
  methods: {
    editItem(val) {
      console.log(val);
    }
  }
};
</script>

<style scoped>
.tab_ex_container {
  padding: 20px 0;
  margin-top: 84px;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
