antd-ui中的table组件的使用

 

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当前选中行的所有数据

}

}