antd-ui中的table组件的使用

发布时间 2023-08-08 14:40:05作者: 秦小咪

 

html代码:

<a-table
          :columns="columns"
          :data-source="data"
          :row-selection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange,
          }"
          style="margin-top: 20px"
          :loading="loading"
          :fixed="true"
          :scroll="{ x: 'calc(700px + 50%)', y: 450 }"
          :pagination="pagination"
          @change="handleTableChange"
          :ellipsis="true"
        >
          <template slot="name" slot-scope="text, record">
            <el-button @click="executeCustomeCell(record)" type="text">
              {{ text }}
            </el-button>
          </template>
          <template slot="operation" slot-scope="text, record">
            <el-button type="text" @click="followRecord(text, record)"
              >跟进</el-button
            >
            <el-button type="text" @click="showDetail(text, record)"
              >查看</el-button
            >
            <el-button type="text" @click="updateCustomer(text, record)"
              >编辑</el-button
            >
            <template>
              <a-popconfirm
                title="是否确定删除"
                ok-text="确定"
                cancel-text="取消"
                @confirm="deleteCostomer(text, record)"
              >
                <el-button type="text"> 删除</el-button>
              </a-popconfirm>
            </template>
          </template>
        </a-table>
 
js代码:
data(){
return{
columns: [
 {
          title: "客户名称",
          dataIndex: "name",
          key: 0,
          width: 200,
          scopedSlots: { customRender: "name" },    //设置单元格操作
        },
        {
          title: "客户星级",
          dataIndex: "level",
          key: 1,
          width: "150px",
//设置数据格式化
          customRender: (level) => {
            return this.selectDictLabel(this.levelList, level);
          },
        },
        {
          title: "客户类型",
          dataIndex: "type",
          key: 2,
          width: "150px",
          customRender: (type) => {
            return this.selectDictLabel(this.customer_type, type);
          },
        },
{
          title: "操作",
          dataIndex: "operation",
          width: "200px",
          fixed: "right",
          scopedSlots: { customRender: "operation" },
        },
], // 表头
data: [],//表格数据
selectedRowKeys: [], // 选中的行
}
methods:{
onSelectChange(selectedRowKeys, row)){
console.log(selectedRowKeys, row);
//selectedRowKeys当前选择的行的序号,设置选中行的数据回显,
//row当前选中行的所有数据
}
}