antdesign vue——table

加一列序号

		{
          title: '序号',
          align: 'center',
          width: 50,
          customRender: (text, record, index) => index + 1,
        },

• text：该列默认显示的数据 index 值
• record：一行的所有数据 { index:1, }
• index：Table表格数据的下标，也就是数组的下标

根据返回值渲染不同的内容

 		{
          title: '序号',
          dataIndex: 'status',  // text就代表 status 的值
          align: 'center',
          width: 50,
          customRender: (text, record, index) => text == 0 ? '正常' : '异常',
        },

表格前有复选框，需要在a-table标签上添加属性rowKey=“id”（id为data-source数据里的不重复标识项）

在 Table 中，dataSource 和 columns 里的数据值都需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。

如果你的数据没有这个属性，务必使用 rowKey 来指定数据列的主键。若没有指定，控制台会出现缺少 key 的提示，表格组件也会出现各类奇怪的错误。

	<a-table
        size="middle"
        ref="table"
        rowKey="orderId"
        :columns="columns"
        :dataSource="loadData"
        :pagination="false"
        bordered
        :row-selection="rowSelection"      
      >
    
   computed: {
    rowSelection() {
      const { selectedRowKeys } = this;
      return {
        selectedRowKeys,
        onChange: this.onSelectChange,
      };
    },
  },
  methods: {
  	// 点击选框的时候触发，参数为上边标签上的rowKey的值的合集数组
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
  },

给表格特定行设置高亮背景色

• a-table标签设置属性 :rowClassName=“setRowbg”
• 定义methods方法setRowbg
• 定义样式 .bg-pink

	<a-table
        :columns="columns"
        :rowClassName="setRowbg"
        :data-source="loadData"
        bordered
        :scroll="{ x: 1300 }"
        :pagination="false"
      >
      
	// 设置每行的颜色
    setRowbg(record, index) {
      if (index == 0) { // 条件
        return 'bg-pink'
      }
    }
    
    //设置样式类名
	/deep/ .bg-pink {
	  background-color: rgb(255, 212, 147);
	}

给表格每一行添加点击等事件并使其高亮

• table标签添加 :customRow=“rowClick”
• 定义方法 rowClick

	 <a-table
        :columns="columns"
        :rowClassName="setRowbg"
        :data-source="loadData"
        bordered
        :scroll="{ x: 1300 }"
        :pagination="false"
        :customRow="rowClick"
      >

	// 点击每一行添加变量
    rowClick(record) {
      return {
        on: {
          click: () => {
            // 点击该行时赋值
            this.tableCurrRowId = this.tableCurrRowId == record.id ? '' : record.id
          }
        }
      }
    }

拖拽每行重新排序

	 <a-table
      :dataSource="tableData"
      :pagination="false"
      rowKey='id'
      :customRow="customRow"
      bordered>
      ....
     </a-table>

	// 拖动排序
    customRow(record, index) {
      return {
        style: {
          cursor: 'pointer'
        },
        on: {
          // 鼠标移入
          mouseenter: (event) => {
            // 兼容IE
            var ev = event || window.event
            ev.target.draggable = true
          },
          // 开始拖拽
          dragstart: (event) => {
            // 兼容IE
            var ev = event || window.event
            // 阻止冒泡
            ev.stopPropagation()
            // 得到源目标数据
            this.sourceObj = record
          },
          // 拖动元素经过的元素
          dragover: (event) => {
            // 兼容 IE
            var ev = event || window.event
            // 阻止默认行为
            ev.preventDefault()
          },
          // 鼠标松开
          drop: (event) => {
            // 兼容IE
            var ev = event || window.event
            // 阻止冒泡
            ev.stopPropagation()
            // 得到目标数据
            this.targetObj = record
          }
        }
      }
    },