一、表格sintels-table| 成都西华升腾科技有限公司

数字云创开发规范

一、表格sintels-table

CmsWing

一、表格sintels-table

### 一、表头

<sintels-table v-loading="listLoading" :data="list" @sort-change='sortChange'  has-c @selection-change="handleSelectionChange"  @row-dblclick="handledbClick">
	...
	</sintels-table>

1、点击表头字段排序 @sort-change='sortChange'
示例：

sortChange({ column, prop, order }) {
                this.listQuery.sort = order == 'ascending' ? 'asc' : 'desc'
                this.listQuery.sidx = !order ? '' : prop
                this.initData()
            },

2、行双击 @row-dblclick="handledbClick"

handleDel(id) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    type: 'warning'
                }).then(() => {
                    request({
                        url: `/api/example/TvendorInfo/${id}`,
                        method: 'DELETE'
                    }).then(res => {
                        this.$message({
                            type: 'success',
                            message: res.msg,
                            onClose: () => {
                                this.initData()
                            }
                        });
                    })
                }).catch(() => {
                });
            },

3、行选择 @selection-change="handleSelectionChange"

### 二、表体
#### 1、行操作

<el-table-column label="操作" fixed="right" width="100" >
        <template slot-scope="scope">
    		<el-button type="text"
    				   @click="addOrUpdateHandle(scope.row.id)" >编辑
            </el-button>
            <el-button type="text" class="sintels-table-delBtn"  @click="handleDel(scope.row.id)">删除
    		</el-button>
        </template>
    </el-table-column>

##### 1.1、删除

##### 1.2、编辑行数据

addOrUpdateHandle(id,isDetail) {
                    this.formVisible = true
                    this.$nextTick(() => {
                        this.$refs.sintelsForm.init(id,isDetail)
                    })
                },

#### 2、行展示

<el-table-column label="一次性供应商"  prop="finner" algin="left" show-overflow-tooltip>
           <template slot-scope="scope">
          {{ scope.row.finner | dynamicText(finnerOptions) }}
          </template>
    </el-table-column>

##### 2.1、内容超过表格展示量显示省略号...
	show-overflow-tooltip

##### 2.2、数据字典插槽:

购物车

0 ITEMS ON YOUR CART

数字云创开发规范

一、表格sintels-table

网站导航

数字云创 开发规范

一、表格sintels-table

网站导航

数字云创开发规范